{% extends "base.html" %}
{% block title %}{{ t('title_packages', request.state.lang) }}{% endblock %}
{% block breadcrumbs %}
<div class="breadcrumbs">
    <a href="/">{{ t('breadcrumb_home', request.state.lang) }}</a>
    <span class="separator">/</span>
    <span>{{ t('breadcrumb_packages', request.state.lang) }}</span>
</div>
{% endblock %}
{% block content %}
<h1>{{ t('heading_packages', request.state.lang) }}</h1>

<div class="filter-bar">
    <input type="hidden" name="flagged" value="{{ flagged_filter }}">
    <label for="search-pkgs" style="display:none;">{{ t('filter_search', request.state.lang) }}</label>
    <input type="search" id="search-pkgs" name="search" placeholder="{{ t('filter_search', request.state.lang) }}…" value="{{ search }}" hx-get="/packages" hx-trigger="input changed, keyup[entered] delay:300ms" hx-target="#packages-table-container" hx-swap="innerHTML" hx-include="[name=flagged]" autocomplete="off">
    <a href="?flagged={% if flagged_filter == '1' %}0{% else %}1{% endif %}" role="button" class="outline">
        {% if flagged_filter == '1' %}{{ t('btn_show_all', request.state.lang) }}{% else %}{{ t('btn_flagged_only', request.state.lang) }}{% endif %}
    </a>
    <a href="/api/v1/packages/export?flagged={{ flagged_filter }}&search={{ search }}" role="button" class="outline">{{ t('btn_export_csv', request.state.lang) }}</a>
</div>

<div id="packages-table-container">
{% include "_packages_table.html" %}
</div>
{% endblock %}