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

{% block title %}{{ model_name }} - {{ site_title }}{% endblock %}

{% block breadcrumb %}
<nav class="admin-breadcrumb" aria-label="Breadcrumb">
    <a href="{{ request.url_for(url_namespace ~ ':index') }}" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{{ request.url_for(url_namespace ~ ':app_index', app_label=app_label) }}" class="breadcrumb-link">{{ app_label }}</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">{{ model_name }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="page-header-content">
        <h1>{{ model_name }}</h1>
        <span class="badge badge-secondary">{{ pagination.total }} record{% if pagination.total != 1 %}s{% endif %}</span>
    </div>
    <div class="page-actions">
        {% if can_add %}
        <a href="{{ request.url_for(url_namespace ~ ':model_add', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-primary">
            + Add {{ model_name }}
        </a>
        {% endif %}
    </div>
</div>

{% if search_fields %}
<div class="card search-card">
    <form method="get" class="search-form">
        <div class="search-input-group">
            <input type="search" name="q" value="{{ search_query }}" placeholder="Search {{ model_name }}..." class="form-input search-input">
            <button type="submit" class="btn btn-primary">Search</button>
            {% if search_query %}
            <a href="{{ clear_url }}" class="btn btn-ghost">Clear</a>
            {% endif %}
        </div>
    </form>
</div>
{% endif %}

<div class="admin-list-layout">
    <div class="admin-list-main">
        <div class="card" style="padding: 0; overflow: hidden;">
            {% if rows %}
            <form method="post" action="{{ request.url.path }}" class="admin-actions-form">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                {% if actions %}
                <div class="admin-actions-bar">
                    <label for="action-select" class="sr-only">Action</label>
                    <select name="action" id="action-select" class="form-input form-select">
                        <option value="">— Action —</option>
                        {% for act in actions %}
                        <option value="{{ act.name }}">{{ act.description }}</option>
                        {% endfor %}
                    </select>
                    <button type="submit" class="btn btn-secondary">Go</button>
                    <span class="admin-actions-hint" data-selected-count>0 selected</span>
                </div>
                {% endif %}

                <div class="table-responsive">
                    <table class="data-table">
                        <thead>
                            <tr>
                                {% if actions %}
                                <th class="select-column"><input type="checkbox" data-select-all aria-label="Select all"></th>
                                {% endif %}
                                {% for header in list_headers %}
                                <th>
                                    {% if header.sort_url %}
                                    <a href="{{ header.sort_url }}" class="sortable-header">
                                        {{ header.label }}{% if header.sort_dir == 'asc' %} ▲{% elif header.sort_dir == 'desc' %} ▼{% endif %}
                                    </a>
                                    {% else %}
                                    {{ header.label }}
                                    {% endif %}
                                </th>
                                {% endfor %}
                                <th class="actions-column">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for row in rows %}
                            <tr>
                                {% if actions %}
                                <td class="select-column"><input type="checkbox" name="_selected" value="{{ row.obj.id }}" data-row-select></td>
                                {% endif %}
                                {% for cell in row.cells %}
                                <td>
                                    {% if cell.is_link %}
                                    <a href="{{ request.url_for(url_namespace ~ ':model_change', app_label=app_label, model_name=model_name|lower, pk=row.obj.id|string) }}" class="table-link-primary">
                                        {% if cell.is_html %}{{ cell.value|safe }}{% else %}{{ cell.value if cell.value and cell.value != '-' else '—' }}{% endif %}
                                    </a>
                                    {% elif cell.is_html %}
                                    {{ cell.value|safe }}
                                    {% elif cell.value == '✓' %}
                                    <span class="value-badge value-badge-success">Yes</span>
                                    {% elif cell.value == '✗' %}
                                    <span class="value-badge value-badge-danger">No</span>
                                    {% elif cell.value == '-' or not cell.value %}
                                    <span class="value-null">—</span>
                                    {% else %}
                                    {{ cell.value }}
                                    {% endif %}
                                </td>
                                {% endfor %}
                                <td class="actions-cell">
                                    <a href="{{ request.url_for(url_namespace ~ ':model_change', app_label=app_label, model_name=model_name|lower, pk=row.obj.id|string) }}" class="btn btn-sm btn-ghost">Edit</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </form>
            {% else %}
            <div class="empty-state">
                {% if search_query %}
                <h3>No results found</h3>
                <p class="text-muted">No {{ model_name }} objects match "{{ search_query }}".</p>
                <a href="{{ clear_url }}" class="btn btn-secondary">Clear Search</a>
                {% else %}
                <h3>No {{ model_name }} objects yet</h3>
                <p class="text-muted">Get started by creating your first {{ model_name }}.</p>
                {% if can_add %}
                <a href="{{ request.url_for(url_namespace ~ ':model_add', app_label=app_label, model_name=model_name|lower) }}" class="btn btn-primary">+ Add {{ model_name }}</a>
                {% endif %}
                {% endif %}
            </div>
            {% endif %}
        </div>

        {% if pagination.num_pages > 1 or pagination.show_all %}
        <div class="admin-pagination">
            <div class="admin-pagination-info">
                {% if pagination.show_all %}
                Showing all {{ pagination.total }}
                {% else %}
                Page {{ pagination.page }} of {{ pagination.num_pages }} ({{ pagination.total }} total)
                {% endif %}
            </div>
            <div class="admin-pagination-controls">
                {% if pagination.has_prev %}
                <a href="{{ pagination.prev_url }}" class="btn btn-sm btn-ghost">‹ Prev</a>
                {% endif %}
                {% if pagination.has_next %}
                <a href="{{ pagination.next_url }}" class="btn btn-sm btn-ghost">Next ›</a>
                {% endif %}
                {% if pagination.show_all_url %}
                <a href="{{ pagination.show_all_url }}" class="btn btn-sm btn-ghost">Show all</a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>

    {% if filters %}
    <aside class="admin-list-filters">
        <div class="card">
            <h3 class="filter-heading">Filters</h3>
            {% for filter in filters %}
            <div class="filter-group">
                <div class="filter-group-title">{{ filter.title }}</div>
                <ul class="filter-options">
                    {% for choice in filter.choices %}
                    <li class="filter-option {% if choice.selected %}is-selected{% endif %}">
                        <a href="{{ choice.url }}">{{ choice.label }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            {% endfor %}
        </div>
    </aside>
    {% endif %}
</div>

<script>
(function () {
    var selectAll = document.querySelector('[data-select-all]');
    var rowBoxes = Array.prototype.slice.call(document.querySelectorAll('[data-row-select]'));
    var counter = document.querySelector('[data-selected-count]');
    function updateCount() {
        if (!counter) return;
        var n = rowBoxes.filter(function (b) { return b.checked; }).length;
        counter.textContent = n + ' selected';
    }
    if (selectAll) {
        selectAll.addEventListener('change', function () {
            rowBoxes.forEach(function (b) { b.checked = selectAll.checked; });
            updateCount();
        });
    }
    rowBoxes.forEach(function (b) { b.addEventListener('change', updateCount); });
})();
</script>
{% endblock %}