{% extends base_template_path %}
{% load powercrud_partials %}
{% load powercrud %}

{% block content %}
    {% partial pcrud_content %}
{% endblock %}

{% partialdef pcrud_content %}
    <style>
        :root {
            --pc-inline-icon-buffer: 2.25ch;
            --pc-filter-control-height: 2rem;
            --pc-filter-font-size: 0.8125rem;
        }

        .inline-field-widget[data-inline-refreshing="true"] {
            opacity: 0.7;
            cursor: wait;
        }

        .inline-field-widget[data-inline-refreshing="true"] * {
            pointer-events: none;
        }

        .table-column-width {
            width: fit-content;
            max-width: {{ table_max_col_width }};
        }
        th.table-column-width {
            white-space: normal;
            min-width: {{ table_header_min_wrap_width }};
            max-width: {{ table_max_col_width }};
        }

        #filterCollapse .filter-panel-shell {
            width: 100%;
            padding: 0;
        }

        [data-powercrud-list-toolbar][data-powercrud-toolbar-wrapped="true"] [data-powercrud-view-controls] {
            justify-content: flex-start;
            margin-left: 0 !important;
            width: 100%;
        }

        [data-powercrud-view-help="true"] {
            border-color: var(--pc-view-help-border);
            min-width: min(var(--pc-view-help-min-width, 40rem), 100%);
            max-width: 100%;
            max-width: 100%;
        }

        [data-powercrud-view-help="true"] > summary {
            background-color: var(--pc-view-help-summary-bg);
            color: var(--pc-view-help-summary-fg);
            min-height: 0;
            padding-block: 0.75rem;
        }

        [data-powercrud-view-help-content="true"] {
            background-color: var(--pc-view-help-content-bg);
            color: var(--pc-view-help-content-fg);
        }

        [data-powercrud-view-help="true"][open] > [data-powercrud-view-help-content="true"] {
            padding-top: 0.75rem;
        }

        @media (max-width: 767px) {
            [data-powercrud-list-columns="true"] .dropdown-content {
                inset-inline-end: auto;
                inset-inline-start: 0;
            }
        }

        [data-powercrud-list-columns-placement="start"] .dropdown-content {
            inset-inline-end: auto;
            inset-inline-start: 0;
        }

        #filter-form {
            grid-template-columns: minmax(0, 1fr);
            width: 100%;
            padding: 0.375rem 0.5rem 0.5rem;
        }

        @media (min-width: 640px) {
            #filter-form {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (min-width: 1280px) {
            #filter-form {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        #filter-form .filter-field {
            min-width: 0;
        }

        #filter-form .filter-field-shell {
            display: grid;
            grid-template-columns: minmax(5.25rem, 6.75rem) minmax(0, 1fr) auto;
            align-items: center;
            column-gap: 0.375rem;
            row-gap: 0;
            min-height: 100%;
            padding: 0 0.25rem;
        }

        #filter-form .filter-field-label .label-text {
            text-align: right;
            white-space: normal;
            line-height: 1.15;
            overflow-wrap: anywhere;
        }

        #filter-form .filter-field-label {
            padding: 0;
            min-height: 0;
            align-self: center;
            justify-self: end;
        }

        #filter-form .filter-field-action {
            min-width: 1.125rem;
            min-height: 1.125rem;
            padding: 0;
        }

        #filter-form .filter-field-action svg {
            width: 0.875rem;
            height: 0.875rem;
        }

        #filter-form input:not([type="checkbox"]),
        #filter-form select:not([multiple]) {
            height: var(--pc-filter-control-height) !important;
            min-height: var(--pc-filter-control-height) !important;
            max-height: var(--pc-filter-control-height) !important;
            padding-top: 0.1875rem !important;
            padding-bottom: 0.1875rem !important;
            font-size: var(--pc-filter-font-size) !important;
            line-height: 1.2 !important;
        }

        #filter-form select:not([multiple]):not(.ts-hidden-accessible) {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            line-height: calc(var(--pc-filter-control-height) - 2px) !important;
        }

        #filter-form .filter-field-input {
            width: 100%;
        }

        #filter-form .filter-field-input > * {
            width: 100%;
        }

        #filter-form .ts-wrapper {
            width: 100%;
        }

        #filter-form .ts-wrapper .ts-control {
            min-height: var(--pc-filter-control-height);
            font-size: var(--pc-filter-font-size);
            line-height: 1.2;
        }

        #filter-form .ts-wrapper.multi .ts-control {
            align-items: center;
            padding-top: 0.125rem;
            padding-bottom: 0.125rem;
            min-height: var(--pc-filter-control-height);
        }

        #filter-form .ts-wrapper.multi .ts-control > .item {
            margin: 0.125rem;
        }

        #filter-form select[multiple] {
            min-height: var(--pc-filter-control-height) !important;
            max-height: var(--pc-filter-control-height) !important;
            font-size: var(--pc-filter-font-size) !important;
        }

        #filter-form .ts-dropdown {
            font-size: var(--pc-filter-font-size);
        }

        [data-powercrud-add-filter-container]:not(.hidden) {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
            justify-content: flex-end;
            padding: 0.375rem 0.5rem;
        }

        [data-powercrud-add-filter-container] > label {
            min-height: 2rem;
            height: 2rem;
        }

        [data-powercrud-add-filter-container] .ts-wrapper {
            width: 100%;
        }

        [data-powercrud-add-filter-container] .ts-wrapper .ts-control {
            background-color: var(--color-base-200);
            border-color: color-mix(in oklab, var(--color-base-content) 18%, transparent);
            min-height: 2rem;
            padding-block: 0.25rem;
            font-size: 0.8125rem;
            line-height: 1.25;
        }

        @media (max-width: 639px) {
            #filterCollapse .filter-panel-shell {
                padding: 0;
            }

            #filter-form {
                padding: 0.25rem 0.375rem;
            }

            [data-powercrud-add-filter-container] {
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
            }

            [data-powercrud-add-filter-container] label {
                max-width: none;
            }

            [data-powercrud-filter-panel-action] {
                width: 100%;
            }

            #filter-form .filter-field-shell {
                grid-template-columns: 1fr auto;
                row-gap: 0.375rem;
                padding: 0;
            }

            #filter-form .filter-field-label {
                grid-column: 1;
                grid-row: 1;
                justify-self: start;
            }

            #filter-form .filter-field-label .label-text {
                text-align: left;
            }

            #filter-form .filter-field-input {
                grid-column: 1 / -1;
                grid-row: 2;
            }

            #filter-form .filter-field-action {
                grid-column: 2;
                grid-row: 1;
                justify-self: end;
            }
        }
    </style>

    <title id="header_title">{{header_title}}</title>
    <div class="flex flex-col"
         data-powercrud-object-list="true"
         data-powercrud-list-url="{{ list_view_url }}"
         data-powercrud-original-target="{{ original_target }}">
        <h1 class="flex-1 font-bold text-xl text-base-content">{{ view.get_view_title }}</h1>
        {% if view.get_view_instructions %}
            <p class="mt-1 text-sm text-base-content/80">{{ view.get_view_instructions }}</p>
        {% endif %}
        {% with view_help=view.get_view_help view_help_paragraphs=view.get_view_help_detail_paragraphs %}
            {% if view_help %}
                <details class="collapse collapse-arrow mt-3 border"
                         data-powercrud-view-help="true"
                         data-powercrud-view-help-min-width="{{ view_help.min_width }}"
                         style="{{ view_help.style }} --pc-view-help-min-width: {{ view_help.min_width }};"
                         {% if view_help.default_open %}open{% endif %}>
                    <summary class="collapse-title cursor-pointer text-sm font-semibold">
                        {{ view_help.summary }}
                    </summary>
                    <div class="collapse-content space-y-2 text-sm"
                         data-powercrud-view-help-content="true">
                        {% for paragraph in view_help_paragraphs %}
                            <p>{{ paragraph }}</p>
                        {% endfor %}
                    </div>
                </details>
            {% endif %}
        {% endwith %}

        <div class="my-3 flex flex-wrap items-center gap-3"
             data-powercrud-list-toolbar="true">
            <div class="flex flex-wrap items-center gap-3"
                 data-powercrud-action-controls>
            {% if enable_selection_controls %}
            {% partial bulk_selection_status %}
            {% endif %}

            {% partial list_actions %}
            </div>

            <div class="flex flex-wrap items-center gap-2 sm:ml-auto"
                 data-powercrud-view-controls>
            {% if filter_favourites_enabled %}
                {% include "powercrud/contrib/favourites/toolbar.html" %}
            {% endif %}

            {% if filterset %}
                <div class="flex flex-wrap items-center gap-2"
                     data-powercrud-filter-toolbar>
                    {% partial filter_trigger %}
                </div>
            {% endif %}

            {% if list_options_url and list_column_state.enabled %}
                {% partial list_columns %}
            {% endif %}

            {% partial page_size_selector %}
            </div>
        </div>

        {% if filterset %}
        <div class="hidden py-2"
             id="filterCollapse">
            <div class="filter-panel-shell rounded-box border border-base-300 bg-base-300 shadow-sm">
            {% partial filter_panel_actions %}
            {% partial filter_form %}
            </div>
        </div>
        {% endif %}

        <!-- Hidden fields to preserve current filter and sort parameters -->
        {% for key, values in request.GET.lists %}
            {% if key != 'csrfmiddlewaretoken' and key != 'page_size' and key != 'page' and key != visible_filter_param_name %}
                {% for value in values %}
                    {% if filterset and key not in filterset.form.fields %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% elif not filterset %}
                        <input type="hidden" name="{{ key }}" value="{{ value }}">
                    {% endif %}
                {% endfor %}
            {% endif %}
        {% endfor %}

        <div id="filtered_results">
            {% partial filtered_results %}
        </div>
    </div>

    {% include framework_template_path|add:"/partial/modal.html" %}

{% endpartialdef pcrud_content %}

{% partialdef bulk_selection_status %}
{% if bulk_selection_status_template_paths %}
    {% include bulk_selection_status_template_paths %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/bulk_selection_status.html" %}
{% endif %}
{% endpartialdef bulk_selection_status %}

{% partialdef filtered_results %}
    {% if show_record_count or show_bulk_selection_meta %}
        <div class="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-base-content/70"
             data-powercrud-results-meta="true">
            {% if show_record_count %}
                <div>
                    {% if is_paginated and record_count_total > 0 %}
                        Showing {{ record_count_start }}-{{ record_count_end }} of {{ record_count_total }}
                        {% if record_count_has_active_filters %}matching{% else %}total{% endif %}
                        record{{ record_count_total|pluralize }}
                    {% else %}
                        {{ record_count_total }}
                        {% if record_count_has_active_filters %}matching{% else %}total{% endif %}
                        record{{ record_count_total|pluralize }}
                    {% endif %}
                </div>
            {% endif %}
            {% if show_bulk_selection_meta %}
                {% if bulk_selection_controls_template_paths %}
                    {% include bulk_selection_controls_template_paths with selection_control="matching" %}
                {% else %}
                    {% include "powercrud/packs/daisyui/partial/bulk_selection_controls.html" with selection_control="matching" %}
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
    {% if object_list %}
        {% object_list object_list view %}
        {% partial pagination %}
    {% else %}
        <p class="mt-4">
            There are no {{ object_verbose_name_plural }}.{% if create_view_url %} Create one now?{% endif %}
        </p>
    {% endif %}
{% endpartialdef filtered_results %}

{% partialdef list_actions %}
{% if list_actions_template_paths %}
    {% include list_actions_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/list_actions.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/list_actions.html" %}
{% endif %}
{% endpartialdef list_actions %}

{% partialdef filter_trigger %}
{% if filter_trigger_template_paths %}
    {% include filter_trigger_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/filter_trigger.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/filter_trigger.html" %}
{% endif %}
{% endpartialdef filter_trigger %}

{% partialdef filter_panel_actions %}
{% if filter_panel_actions_template_paths %}
    {% include filter_panel_actions_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/filter_panel_actions.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/filter_panel_actions.html" %}
{% endif %}
{% endpartialdef filter_panel_actions %}

{% partialdef filter_form %}
{% if filter_form_template_paths %}
    {% include filter_form_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/filter_form.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/filter_form.html" %}
{% endif %}
{% endpartialdef filter_form %}

{% partialdef list_columns %}
{% if list_columns_template_paths %}
    {% include list_columns_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/list_columns.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/list_columns.html" %}
{% endif %}
{% endpartialdef list_columns %}

{% partialdef pagination %}
{% if pagination_template_paths %}
    {% include pagination_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/pagination.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/pagination.html" %}
{% endif %}
{% endpartialdef pagination %}

{% partialdef page_size_selector %}
{% if page_size_selector_template_paths %}
    {% include page_size_selector_template_paths %}
{% elif framework_template_path %}
    {% include framework_template_path|add:"/partial/page_size_selector.html" %}
{% else %}
    {% include "powercrud/packs/daisyui/partial/page_size_selector.html" %}
{% endif %}
{% endpartialdef page_size_selector %}