{% extends "layout.html" %}
{% from "_column_header.html" import render as column_header with context %}
{% from "_pagination.html" import render as pagination with context %}
{% from "_filter_bar.html" import render as filter_bar with context %}
{% from "_filter_builder.html" import render as filter_builder with context %}
{% from "actions.html" import action_item with context %}
{% set inline_edit_enabled = view.inline_editable_fields and view.can_edit(request) %}
{% block header %}
    <div class="d-flex justify-content-between align-items-center">
        {% block page_title %}<h1>{{ view.menu_label }}</h1>{% endblock %}
        {% block breadcrumbs %}
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url_for(__name__ ~ ':index') }}">{{ _("Admin") }}</a>
                </li>
                <li class="breadcrumb-item active">{{ view.menu_label }}</li>
            </ol>
        {% endblock %}
    </div>
{% endblock %}
{% block modal %}
    {% include "modals/loading.html" %}
    {% include "modals/actions.html" %}
    {% if view.can_import(request) and view.importers %}
        {% include "modals/import.html" %}
    {% endif %}
    {% if inline_edit_enabled %}
        {% include "inline-edit/popover.html" %}
        {% include "inline-edit/popover_body.html" %}
    {% endif %}
{% endblock %}
{% block content %}
    <div class="row row-deck row-cards">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="card-title d-flex align-items-center gap-3">
                        {% block list_search %}
                            <form method="GET" class="d-flex">
                                <div class="input-group">
                                    <input type="search"
                                           name="q"
                                           value="{{ list_params.q or '' }}"
                                           class="form-control"
                                           placeholder="{{ _('Search') }}..."
                                           aria-label="{{ _('Search in list') }}"
                                           autocomplete="off" />
                                    <button class="{{ cls('list.search_button') }}"
                                            type="submit"
                                            aria-label="{{ _('Search') }}">
                                        <i class="{{ icon('list.search') }}" aria-hidden="true"></i>
                                    </button>
                                </div>
                                {% for s_name, s_dir in list_params.sorts %}
                                    <input type="hidden" name="sort" value="{{ s_name }}__{{ s_dir }}" />
                                {% endfor %}
                                {% if list_params.page_size != view.page_size %}
                                    <input type="hidden" name="page_size" value="{{ list_params.page_size }}" />
                                {% endif %}
                                {% if list_params.visible_cols is not none %}
                                    <input type="hidden"
                                           name="cols"
                                           value="{{ list_params.visible_cols | join(',') }}" />
                                {% endif %}
                                {% if raw_filter %}
                                    <input type="hidden" name="filter" value="{{ raw_filter }}" />
                                {% endif %}
                            </form>
                        {% endblock %}
                    </div>
                    <div class="card-actions">
                        <div class="btn-list">
                            {% block list_toolbar %}
                                {% include "actions.html" %}
                                {{ filter_builder(view,list_params, filter_chips, filter_builder_fields) }}
                                {% if view.column_visibility %}
                                    <div class="dropdown" id="column-visibility-dropdown">
                                        <button type="button"
                                                class="{{ cls('list.columns_toggle') }}"
                                                data-bs-toggle="dropdown"
                                                data-bs-auto-close="outside">
                                            <i class="{{ icon('list.columns') }} me-2"></i>{{ _("Columns") }}
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end p-2">
                                            {% for field in all_fields %}
                                                <label class="dropdown-item">
                                                    <input type="checkbox"
                                                           class="form-check-input me-2 column-visibility-toggle"
                                                           data-sa-hook="column-visibility-toggle"
                                                           value="{{ field.name }}"
                                                           {% if list_params.visible_cols is none or field.name in list_params.visible_cols %}checked{% endif %}>
                                                    {{ field.label }}
                                                </label>
                                            {% endfor %}
                                            <div class="dropdown-divider"></div>
                                            <div class="d-flex justify-content-between align-items-center px-2 pt-1">
                                                <a href="{{ list_url(request, cols=None, page=None) }}"
                                                   class="{{ cls('list.columns_reset_button') }}">{{ _("Reset") }}</a>
                                                <button type="button"
                                                        class="{{ cls('list.columns_apply_button') }}"
                                                        onclick="applyColumnVisibility()">{{ _("Apply") }}</button>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                {% for action in _actions | selectattr("dedicated_button") | list %}
                                    {{ action_item(action, dedicated=True) }}
                                {% endfor %}
                                {% if view.can_import(request) and view.importers %}
                                    <button type="button"
                                            class="{{ cls('list.import_button') }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#modal-import">
                                        <i class="{{ icon('list.import') }} me-2"></i>{{ _("Import") }}
                                    </button>
                                {% endif %}
                                {% block list_toolbar_extra %}{% endblock %}
                                {% if view.can_create(request) %}
                                    <a href="{{ create_url(request, view.key) }}"
                                       class="{{ cls('list.create_button') }}">
                                        <i class="{{ icon('list.new') }} me-2"></i>
                                        {{ _("New %(name)s", name=view.display_name) }}
                                    </a>
                                {% endif %}
                            {% endblock %}
                        </div>
                    </div>
                </div>
                {% if filter_chips %}
                    <div class="card-body border-bottom py-2">{{ filter_bar(filter_chips, filter_logic, list_params) }}</div>
                {% endif %}
                {% block list_before_table %}
                {% endblock %}
                {% block list_table %}
                    {% if total > (rows | length) %}
                        <div id="select-all-banner"
                             data-sa-hook="select-all-banner"
                             class="alert {{ cls('alert.info') }} py-2 mb-0 d-none d-flex align-items-center justify-content-between"
                             role="alert">
                            <span id="select-all-banner-page" data-sa-hook="select-all-banner-page">
                                {{ _("All %(count)s rows on this page are selected.", count=(rows | length) ) }}
                                <a href="#"
                                   id="select-all-matching-link"
                                   data-sa-hook="select-all-matching-link">{{ _("Select all %(total)s rows matching the current filter.", total=total) }}</a>
                            </span>
                            <span id="select-all-banner-all"
                                  data-sa-hook="select-all-banner-all"
                                  class="d-none">
                                {{ _("All %(total)s rows matching the current filter are selected.", total=total) }}
                                <a href="#"
                                   id="clear-select-all-link"
                                   data-sa-hook="clear-select-all-link">{{ _("Clear selection") }}</a>
                            </span>
                        </div>
                    {% endif %}
                    <div class="table-responsive">
                        <table class="{{ cls('list.table') }}">
                            <thead>
                                {% block list_header %}
                                    <tr>
                                        <th scope="col" class="w-1 checkbox-cell" data-sa-hook="checkbox-cell">
                                            <input class="form-check-input"
                                                   type="checkbox"
                                                   id="select-all-rows"
                                                   data-sa-hook="select-all"
                                                   aria-label="{{ _('Select all rows') }}" />
                                        </th>
                                        {% if view.row_actions_position.value == "BEFORE_COLUMNS" %}<th scope="col" class="w-1"></th>{% endif %}
                                        {% for field in fields %}<th scope="col" data-column="{{ field.name }}">{{ column_header(field, list_params) }}</th>{% endfor %}
                                        {% if view.row_actions_position.value == "AFTER_COLUMNS" %}<th scope="col" class="w-1"></th>{% endif %}
                                    </tr>
                                {% endblock %}
                            </thead>
                            <tbody>
                                {% for row in rows %}
                                    {# The row markup lives in _list_row.html so the inline-edit
                                       row endpoint can render an identical replacement row. #}
                                    {% block list_row scoped %}
                                        {% include "_list_row.html" %}
                                    {% endblock %}
                                {% else %}
                                    <tr>
                                        <td colspan="{{ (fields | length) + 2 }}"
                                            class="text-center text-muted py-4">
                                            {% block list_empty scoped %}{{ _("No data") }}{% endblock %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% endblock %}
                {% block list_after_table %}{% endblock %}
                {% block list_footer %}
                    <div class="card-footer d-flex align-items-center">
                        {{ pagination(list_params, view, total, total_pages, range_start, range_end) }}
                    </div>
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}
{% block head_css %}
    {{ super() }}
    <style>
        .checkbox-cell {
            cursor: pointer;
        }
    </style>
    {% if view.row_click_navigate %}
        <style>
            tbody tr.row-clickable {
                cursor: pointer;
            }

            tbody tr.row-clickable:hover>* {
                --tblr-table-color-state: var(--tblr-table-hover-color);
                --tblr-table-bg-state: var(--tblr-table-hover-bg);
            }
        </style>
    {% endif %}
    {% for link in view._additional_css_links(request) %}<link rel="stylesheet" href="{{ link }}">{% endfor %}
    {% if inline_edit_enabled %}
        <link rel="stylesheet"
              href="{{ static_url(request, 'css/inline-edit.css', v=3) }}">
    {% endif %}
{% endblock %}
{% block script %}
    {{ super() }}
    <script type="text/javascript"
            src="{{ static_url(request, 'js/utils.js', v=1) }}"></script>
    <script type="text/javascript"
            src="{{ static_url(request, 'js/alerts.js', v=3) }}"></script>
    <script type="text/javascript"
            src="{{ static_url(request, 'js/actions.js', v=2) }}"></script>
    {% if inline_edit_enabled %}
        <script type="text/javascript"
                src="{{ static_url(request, 'js/form.js', v=1) }}"></script>
    {% endif %}
    {% for link in view._additional_js_links(request) %}
        <script type="text/javascript" src="{{ link }}"></script>
    {% endfor %}
    <script type="text/javascript"
            src="{{ static_url(request, 'js/list.js', v=10) }}"></script>
    {% if filter_builder_fields %}
        <script type="text/javascript"
                src="{{ static_url(request, 'js/filter-builder.js', v=1) }}"></script>
    {% endif %}
    {% if view.can_import(request) and view.importers %}
        <script type="text/javascript"
                src="{{ static_url(request, 'js/import.js', v=3) }}"></script>
    {% endif %}
    {# djlint:off #}
    <script>
        initListPage({
            actionUrl: "{{ url_for(__name__ ~ ':action', key=view.key) | safe }}",
            rowActionUrl: "{{ url_for(__name__ ~ ':row-action', key=view.key) | safe }}",
            searchHighlight: {{ view.search_highlight | tojson }},
            searchAutoSubmit: {{ view.search_auto_submit | tojson }},
            rowsTotal: {{ total | tojson }}{% if inline_edit_enabled %},
            inlineEdit: {
                enabled: true,
                url: "{{ url_for(__name__ ~ ':inline-edit', key=view.key) | safe }}",
                rowUrl: "{{ url_for(__name__ ~ ':inline-edit-row', key=view.key) | safe }}"
            }
            {% endif %}
        });
        {% if filter_builder_fields %}
            initFilterBuilder({
                fields: {{ filter_builder_fields | tojson | safe }},
                initialFilter: {{ raw_filter | tojson | safe }}
            });
        {% endif %}
        {% if view.can_import(request) and view.importers %}
            initImportModal("{{ import_url(request, view.key) | safe }}");
        {% endif %}
    </script>{# djlint:on #}
{% endblock %}