{% extends "admin/base.html" %}

{% use_elements %}

{% block header_scripts %}
<script src="{{ asset('admin/list.js') }}" defer nonce="{{ request.csp_nonce }}"></script>
{% endblock %}

{% block content %}

{% htmxfragment "list" %}

<header class="flex items-center justify-between">
    <div>
        {% if table_style == "preview" %}
            <div class="text-sm font-medium text-admin-foreground/80 mb-2">{{ title }}</div>
        {% else %}
            <h3 class="text-xs font-semibold uppercase tracking-wider text-admin-muted-foreground">{{ page.paginator.count }} result{{ page.paginator.count|pluralize }}</h3>
        {% endif %}
    </div>
    <div class="flex space-x-2">
        {% if table_style == "preview" %}
        <a class="text-sm" href="{{ request.path }}{% if search_query %}?search={{ search_query }}{% endif %}">View {{ page.paginator.count }} result{{ "s" if page.paginator.count != 1 else "" }}</a>
        {% else %}
        {% if actions %}
        <form method="POST" data-actions-form>
            <select name="action_name" class="admin-select admin-select-sm w-auto">
                <option value="">Actions...</option>
                {% for action in actions %}
                <option>{{ action }}</option>
                {% endfor %}
            </select>
            <input type="hidden" name="action_ids" value="" />
        </form>
        {% endif %}

        <form method="GET" class="inline-flex space-x-2">
            {% if filter_names %}
            <select data-autosubmit name="filter" class="admin-select admin-select-sm w-auto">
                <option value="">Filter...</option>
                {% for filter in filter_names %}
                <option {% if filter == current_filter %}selected{% endif %}>{{ filter }}</option>
                {% endfor %}
            </select>
            {% endif %}

            {% if search_fields %}
            <admin.SearchInput
                name="search"
                id="search"
                value={search_query|default('')}
                class="admin-input input-sm w-auto pl-8!"
                />
            {% endif %}
        </form>
        {% endif %}
    </div>
</header>

{% if objects %}
{# The overflow-auto box (needed for horizontal scroll) also clips vertically,
   cutting off focus rings on the top/bottom rows. `py-1` gives them room; the
   smaller top margin and negative bottom margin keep the table in the same
   place (net top = mt-1 + pt-1 = the original mt-2; net bottom unchanged). #}
<div class="w-full overflow-auto mt-1 -mb-1 py-1">
    <table class="admin-table table-auto">
        <thead>
            <tr class="[&>:first-child]:rounded-l-admin-md [&>:last-child]:rounded-r-admin-md">
                {% if table_style != "preview" and actions %}
                <th class="p-0 pl-1">
                    <input
                        data-action-checkbox-all
                        class="admin-input"
                        type="checkbox"
                    />
                </th>
                {% endif %}

                {% for field in fields %}
                    {% set label = get_field_label(field) %}
                    {% if order_by_field is defined %}
                        {# 3-state sort cycle: unsorted -> ascending -> descending -> cleared. #}
                        {% if field != order_by_field %}
                            {% set next_order_by = field %}
                            {% set aria_sort = "none" %}
                            {% set sort_action = "Sort by " ~ label ~ " ascending" %}
                        {% elif order_by_direction != "-" %}
                            {% set next_order_by = "-" ~ field %}
                            {% set aria_sort = "ascending" %}
                            {% set sort_action = "Sort by " ~ label ~ " descending" %}
                        {% else %}
                            {% set next_order_by = "" %}
                            {% set aria_sort = "descending" %}
                            {% set sort_action = "Stop sorting by " ~ label %}
                        {% endif %}
                    <th{% if table_style != "preview" %} aria-sort="{{ aria_sort }}"{% endif %}>
                        {% if table_style == "preview" %}
                        <div class="text-xs font-normal">
                            {{ label }}
                        </div>
                        {% else %}
                        <a
                            data-merge-params
                            aria-label="{{ sort_action }}"
                            class="text-xs font-normal flex items-center gap-1 hover:text-admin-foreground group"
                            href="?page=1&order_by={{ next_order_by }}">
                            <span>{{ label }}</span>
                            {% if field == order_by_field %}
                                {% if order_by_direction == "-" %}
                                {# Sorted descending; the next click clears, so reveal an x on hover/focus. #}
                                <admin.Icon name="caret-down-fill" class="text-[10px] group-hover:hidden group-focus:hidden" />
                                <admin.Icon name="x-lg" class="text-[10px] hidden group-hover:inline group-focus:inline" />
                                {% else %}
                                <admin.Icon name="caret-up-fill" class="text-[10px]" />
                                {% endif %}
                            {% else %}
                            <admin.Icon name="caret-up-fill" class="text-[10px] text-admin-muted-foreground/60 opacity-0 group-hover:opacity-100 group-focus:opacity-100" />
                            {% endif %}
                        </a>
                        {% endif %}
                    </th>
                    {% else %}
                    <th class="text-xs font-normal text-admin-muted-foreground">{{ label }}</th>
                    {% endif %}
                {% endfor %}

                {# A th that spans any links columns that will be added #}
                <th colspan="99"></th>
            </tr>
        </thead>
        <tbody>
            {% for object in objects %}
            <tr>

                {% set row_url = get_object_url(object) %}

                {% if table_style != "preview" and actions %}
                <td class="p-0 pl-1">
                    <input data-action-checkbox class="admin-input" type="checkbox" name="{{ get_object_id(object) }}" />
                </td>
                {% endif %}

                {% for field in fields %}
                {# Make every column clickable if it doesn't contain a link already #}
                <td data-column-autolink="{{ row_url }}">
                    <div class="max-w-prose truncate">
                        {% set value = get_field_value(object, field) %}
                        {% set value = format_field_value(object, field, value) %}
                        {% include get_field_value_template(object, field, value) with context %}
                    </div>
                </td>
                {% endfor %}

                {% set object_links = get_object_links(object) %}
                {% if object_links %}
                <td class="py-0">
                    <div class="admin-dropdown-menu">
                        <button
                            type="button"
                            aria-haspopup="menu"
                            aria-expanded="false"
                            aria-controls="row-actions-{{ loop.index }}"
                            class="admin-btn admin-btn-icon admin-btn-ghost"
                        >
                            <admin.Icon name="three-dots" />
                        </button>
                        <div id="row-actions-{{ loop.index }}" popover="manual" data-popover data-align="end" class="w-48">
                            <div role="menu">
                                {% for text, url in object_links.items() %}
                                <a role="menuitem" href="{{ url }}">{{ text }}</a>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="mt-2 border-t border-admin-border py-10 text-center">
    <p class="text-sm text-admin-muted-foreground/80">
        {% if search_query %}
        No results for "{{ search_query }}"
        {% else %}
        No items yet
        {% endif %}
    </p>
</div>
{% endif %}

{% if table_style != "preview" and page.has_other_pages() %}
<footer class="mt-4 sticky bottom-0 [body[data-toolbar-fullbar]_&]:pb-12 bg-admin-background/95 backdrop-blur-sm border-t border-admin-border pt-4 pb-3">
    <div class="flex items-center justify-between text-sm">
        <span class="text-admin-muted-foreground">
            Page {{ page.number }} of {{ page.paginator.num_pages }} ({{ page.paginator.count }} results, {{ page.paginator.per_page }} per page)
        </span>
        <div class="flex items-center gap-2">
            {% if page.has_previous() %}
            <a data-merge-params href="?page={{ page.previous_page_number() }}" class="admin-btn admin-btn-sm admin-btn-outline">&lt;</a>
            {% endif %}
            {# submitFormClean merges this onto the current URL, so search/filter/sort carry over without hidden inputs. #}
            <form data-autosubmit method="GET">
                <select name="page" class="admin-select admin-select-sm w-auto">
                {% for page_num in page.paginator.page_range %}
                    <option value="{{ page_num }}" {% if page_num == page.number %}selected{% endif %}>Page {{ page_num }}</option>
                {% endfor %}
                </select>
            </form>
            {% if page.has_next() %}
            <a data-merge-params href="?page={{ page.next_page_number() }}" class="admin-btn admin-btn-sm admin-btn-outline">&gt;</a>
            {% endif %}
        </div>
    </div>
</footer>
{% endif %}

{% endhtmxfragment %}

{% endblock %}