{% extends base_template_path %}
{% load partials %}
{% load powercrud %}

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

{% partialdef pcrud_content %}
    <style>
        :root {
            --pc-inline-icon-buffer: 2.25ch;
            --pc-filter-control-height: 2.25rem;
            --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;
            max-width: {{ table_max_col_width }};
        }

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

        #filter-form label {
            @apply font-bold text-center block;
        }

        #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.25rem !important;
            padding-bottom: 0.25rem !important;
            font-size: var(--pc-filter-font-size) !important;
            line-height: 1.2 !important;
        }

        #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.25rem;
            padding-bottom: 0.25rem;
            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);
        }
    </style>

    <title id="header_title">{{header_title}}</title>
    <div id="pc-inline-alert" class="hidden mb-2" data-powercrud-inline-alert></div>
    <div class="flex flex-col"
         data-powercrud-object-list="true"
         data-powercrud-list-url="{{ list_view_url }}">
        <h1 class="flex-1 font-bold text-xl text-primary">{{ 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 %}

        <div class="flex gap-2 my-2 items-center flex-wrap">
            {% if filterset %}
                <div class="join">
                    <button class="join-item btn btn-secondary {{ view.get_extra_button_classes }}" type="button"
                        data-powercrud-filter-toggle
                        id="filterToggleBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-funnel" viewBox="0 0 16 16" aria-hidden="true">
                            <path d="M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z"/>
                        </svg>
                        <span>Show Filters</span>
                    </button>
                    
                    {% if not use_htmx %}
                        <button type="submit"
                            form="filter-form"
                            class="join-item btn btn-info {{ view.get_extra_button_classes }}">Filter</button>
                    {% endif %}

                    <div class="tooltip tooltip-bottom tooltip-info" data-tip="Reset filters, sort & page size">
                    <a href="." class="join-item btn btn-outline btn-secondary {{ view.get_extra_button_classes }}" 
                        hx-get="." hx-target="{{ original_target }}" hx-push-url="true"
                        data-powercrud-filter-reset>Reset
                    </a>
                    </div>
                </div>
            {% endif %}

            {% if enable_bulk_edit %}
            {% partial bulk_selection_status %}
            {% endif %}
                        
            {% if create_view_url %}
                {% if use_htmx and htmx_target %}
                    <a class="btn btn-primary {{ view.get_extra_button_classes }}" href="{{ create_view_url }}" 
                        hx-get="{{ create_view_url }}"
                        hx-target="{{htmx_target}}" 
                        onclick="powercrudBaseModal.showModal()">
                        Create {{ object_verbose_name }}
                    </a>
                {% else %}
                    <a class="btn btn-primary {{ view.get_extra_button_classes }}" href="{{ create_view_url }}">
                        Create {{ object_verbose_name }}
                    </a>
                {% endif %}
            {% endif %}

            {% extra_buttons view %}

            <!-- Page Size Selector -->
            <form id="page-size-form" class="inline ml-2" style="white-space:nowrap;"
                hx-get="." hx-target="{{ original_target }}" hx-push-url="true"
                hx-trigger="change" hx-include="[name]">
                <label for="page-size-select" class="sr-only">Page size</label>
                <select id="page-size-select" name="page_size"
                    class="select select-bordered select-sm align-middle w-[10ch]">
                    {% for size in page_size_options %}
                        <option value="{{ size }}"
                            {% if request.GET.page_size == size %}
                                selected
                            {% elif not request.GET.page_size and default_page_size == size %}
                                selected
                            {% endif %}>{{ size }}</option>
                    {% endfor %}
                    <option value="all" {% if request.GET.page_size == 'all' or default_page_size is None %}selected{% endif %}>
                        All</option>
                </select>
                <span class="text-xs text-base-content/70 ml-1">per page</span>
            </form>
        </div>
    
        {% if filterset %}
        <div class="hidden py-2" id="filterCollapse">
            <div class="rounded-box border border-base-300/60 bg-base-100/40 p-3">
            <form id="filter-form" method="get" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4" hx-target="#filtered_results" hx-push-url="true"
                hx-replace-url="true" hx-headers='{"X-Filter-Sort-Request": "true", "X-Filter-Setting-Request": "true"}'
                action="{{ request.path }}"
                data-powercrud-filter-form="true">
                {% for field in filterset.form %}
                <div class="filter-field form-control w-full min-w-0">
                    <label class="label py-0">
                        <span class="label-text text-xs font-semibold font-bold text-center block">{{ field.label }}</span>
                    </label>
                    <div class="filter-field-input">
                        {{ field }}
                    </div>
                </div>
                {% endfor %}
            </form>
            </div>
        </div>
        {% endif %}

        <!-- Hidden fields to preserve current filter and sort parameters -->
        {% for key, value in request.GET.items %}
            {% if key != 'page_size' and key != 'page' %}
                {% 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 %}
            {% endif %}
        {% endfor %}

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

    <!-- Modal -->
    <dialog id="powercrudBaseModal" class="modal">
        <div class="modal-box">
            <!-- Header with primary background -->
            <!-- <div class="bg-primary text-primary-content p-4 -m-6 mb-6 rounded-t-lg">
                <h3 class="font-bold text-lg">{{ header_title }}</h3>
                <form method="dialog">
                    <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
                </form>
            </div> -->
            
            <!-- Body -->
            <div class="py-4">
                <div id="powercrudModalContent"></div>
            </div>
            
            <!-- Footer -->
            <!-- <div class="flex justify-end gap-2">
                <form method="dialog">
                    <button class="btn btn-warning" onclick="baseModal.close()">Close</button>
                    
                </form>
            </div> -->
        </div>
        <form method="dialog" class="modal-backdrop">
            <button>close</button>
        </form>
    </dialog>

{% endpartialdef pcrud_content %}

{% partialdef bulk_selection_status %}
<!-- Bulk actions container - show/hide based on selection count -->
<div id="bulk-actions-container" 
    class="join {% if selected_count == 0 %}hidden{% endif %}" 
    data-powercrud-bulk-actions="true"
    hx-target="this" 
    hx-swap="outerHTML" 
    hx-trigger="bulkSelectionChanged from:body">
    <a href="{{ list_view_url }}bulk-edit/" class="join-item btn btn-sm btn-primary {{ view.get_extra_button_classes }}"
        hx-get="{{ list_view_url }}bulk-edit/" 
        hx-target="#powercrudModalContent"
        hx-swap="innerHTML"
        onclick="powercrudBaseModal.showModal();">
        Bulk Edit <span id="selected-items-counter">{{ selected_count }}</span>
    </a>
    <button class="join-item btn btn-sm btn-outline btn-error {{ view.get_extra_button_classes }}"
            data-powercrud-clear-selection
            hx-post="{{ list_view_url }}clear-selection/"
            hx-target="#bulk-actions-container"
            hx-swap="outerHTML">
        Clear Selection
    </button>
</div>
{% 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 %}
                <div class="flex items-center gap-2">
                    {% if show_select_all_matching %}
                        <button type="button"
                                class="link link-primary text-sm font-medium"
                                hx-post="{{ list_view_url }}select-all-matching/{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}"
                                hx-target="#bulk-actions-container"
                                hx-swap="outerHTML">
                            {{ select_all_matching_label }}
                        </button>
                    {% elif show_select_all_matching_limit %}
                        <span class="text-xs text-base-content/70">
                            {{ bulk_selection_meta_message }}
                        </span>
                    {% endif %}
                </div>
            {% 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 }}. Create one now?</p>
    {% endif %}
{% endpartialdef filtered_results %}


{% partialdef pagination %}
{% if is_paginated %}
<nav aria-label="Page navigation" class="mt-4">
    <ul class="join flex justify-center">
        {% if page_obj.has_previous %}
        <li>
            <a class="join-item btn btn-sm"
                href="?page={{ page_obj.previous_page_number }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                {% if use_htmx and original_target %} 
                    hx-get="?page={{ page_obj.previous_page_number }}"
                    hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}'
                    hx-target="#filtered_results" 
                    hx-replace-url="true" hx-push-url="true" 
                {% endif %}>Previous
            </a>
        </li>
        
        {% endif %}

        {% get_proper_elided_page_range paginator page_obj.number as page_range %}
        {% for i in page_range %}
            {% if i == "..." %}
            <li><span class="join-item btn btn-sm btn-disabled">…</span></li>
            {% else %}
            <li>
                <a class="join-item btn btn-sm {% if page_obj.number == i %}btn-active{% endif %}"
                    href="?page={{ i }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                    {% if use_htmx and original_target %}
                        hx-get="?page={{ i }}" 
                        hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}' 
                        hx-target="#filtered_results" 
                        hx-replace-url="true" hx-push-url="true" 
                    {% endif %}>{{ i }}
                </a>
            </li>
            
            {% endif %}
        {% endfor %}

        {% if page_obj.has_next %}
        <li>
            <a class="join-item btn btn-sm"
                href="?page={{ page_obj.next_page_number }}{% if request.GET.page_size %}&page_size={{ request.GET.page_size }}{% endif %}"
                {% if use_htmx and original_target %} 
                    hx-get="?page={{ page_obj.next_page_number }}"
                    hx-vals="js:{...getCurrentFilters()}" hx-headers='{"X-Filter-Sort-Request": "true"}' 
                    hx-target="#filtered_results" 
                    hx-replace-url="true" hx-push-url="true" 
                {%endif %}>Next
            </a>
        </li>
        {%endif %}

    </ul>
</nav>
{% endif %}
{% endpartialdef pagination %}
