{% extends "base.html" %}

{% block title %}{{ view.display_name }}{% endblock %}
{% block page_title %}{{ view.display_name }}{% endblock %}

{% block content %}
{# Build filter query string for reuse in links #}
{% set flt_qs = '' %}
{% if active_filters %}
{% for idx in range(active_filters|length) %}
{% set f = active_filters[idx] %}
{% set flt_qs = flt_qs ~ '&flt' ~ idx ~ '_' ~ f[0] ~ '_' ~ f[1] ~ '=' ~ f[2] %}
{% endfor %}
{% endif %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <span class="badge bg-secondary">{{ total }} record{{ 's' if total != 1 }}</span>
    </div>
    <div class="d-flex gap-2">
        <div class="search-box">
            <input type="search"
                   class="form-control form-control-sm"
                   placeholder="Search {{ view.display_name }}..."
                   name="q"
                   value="{{ search }}"
                   hx-get="/{{ view.name }}?partial=1{{ flt_qs }}"
                   hx-trigger="keyup changed delay:300ms"
                   hx-target="#table-body"
                   hx-include="this"
                   hx-indicator="#search-spinner">
            <span class="htmx-indicator" id="search-spinner">
                <span class="spinner-border spinner-border-sm"></span>
            </span>
        </div>
        {% if view.export_types %}
        <div class="btn-group">
            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="bi bi-download"></i> Export
            </button>
            <ul class="dropdown-menu">
                {% for fmt in view.export_types %}
                <li><a class="dropdown-item" href="/{{ view.name }}/export/{{ fmt }}?q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">{{ fmt|upper }}</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
        {% if filter_defs %}
        <select id="add-filter-select" class="form-select form-select-sm no-tomselect" style="width:auto; min-width:140px;">
            <option value="">Add Filter...</option>
            {% for fd in filter_defs %}
            <option value="{{ fd.col }}"
                    data-ops="{% for op_key, op_label in fd.ops %}{{ op_key }}:{{ op_label }}{% if not loop.last %}|{% endif %}{% endfor %}"
                    data-label="{{ fd.label }}"
                    {% if fd.fk_choices is defined and fd.fk_choices %}data-fk="1" data-fk-choices="{% for pk, display in fd.fk_choices %}{{ pk }}::{{ display }}{% if not loop.last %}||{% endif %}{% endfor %}"{% endif %}>
                {{ fd.label }}
            </option>
            {% endfor %}
        </select>
        {% endif %}
        {% if view.can_create %}
        <a href="/{{ view.name }}/create" class="btn btn-primary btn-sm">
            <i class="bi bi-plus-lg"></i> Create
        </a>
        {% endif %}
    </div>
</div>

{# Active filter badges #}
{% if filter_defs and active_filters %}
<div id="active-filters" class="mb-3">
    {% for f in active_filters %}
    <span class="badge bg-primary me-1 py-2 px-3" style="font-size: 0.85em;">
        {{ f[3] }} <small class="opacity-75">{{ f[1]|replace('_', ' ') }}</small> "{{ f[2] }}"
        <a href="#" class="remove-filter text-white ms-1" data-idx="{{ loop.index0 }}" style="text-decoration: none;">&times;</a>
    </span>
    {% endfor %}
    <a href="/{{ view.name }}?q={{ search }}&sort={{ sort }}&order={{ order }}" class="btn btn-outline-secondary btn-sm ms-1">
        <i class="bi bi-x-lg"></i> Clear All
    </a>
</div>
{% endif %}

{# New filter row — hidden until a column is chosen from Add Filter #}
{% if filter_defs %}
<div id="new-filter-row" style="display:none;" class="mb-3">
    <div class="d-flex gap-2 align-items-center flex-wrap">
        <span id="filter-col-label" class="badge bg-secondary py-2 px-3" style="font-size:0.85em;"></span>
        <input type="hidden" id="filter-col-value">
        <select id="filter-op" class="form-select form-select-sm no-tomselect" style="width:auto; min-width:160px;"></select>
        <input id="filter-val-text" type="text" class="form-control form-control-sm" style="width:200px;" placeholder="Value...">
        <select id="filter-val-select" class="form-select form-select-sm no-tomselect" style="width:auto; min-width:200px; display:none;"></select>
        <button id="btn-apply-filter" class="btn btn-primary btn-sm">Apply</button>
        <button id="btn-cancel-filter" class="btn btn-outline-secondary btn-sm"><i class="bi bi-x-lg"></i></button>
    </div>
</div>
{% endif %}

<div class="card">
    <div class="table-responsive">
        <table class="table table-hover mb-0">
            <thead>
                <tr>
                    {% if row_actions %}
                    <th class="text-start" style="width: 1px; white-space: nowrap;">Actions</th>
                    {% endif %}
                    {% for col in columns %}
                    <th>
                        {% if col.sortable %}
                        <a href="/{{ view.name }}?sort={{ col.key }}&order={{ 'desc' if sort == col.key and order == 'asc' else 'asc' }}&q={{ search }}{{ flt_qs }}"
                           class="sort-link {% if sort == col.key %}active{% endif %}">
                            {{ col.label }}
                            {% if sort == col.key %}
                            <i class="bi bi-chevron-{{ 'up' if order == 'asc' else 'down' }}"></i>
                            {% endif %}
                        </a>
                        {% else %}
                        {{ col.label }}
                        {% endif %}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody id="table-body">
                {% include "partials/table_body.html" %}
            </tbody>
        </table>
    </div>
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<nav class="mt-3">
    <ul class="pagination pagination-sm justify-content-center">
        <li class="page-item {% if page <= 1 %}disabled{% endif %}">
            <a class="page-link" href="/{{ view.name }}?page={{ page - 1 }}&q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">
                <i class="bi bi-chevron-left"></i>
            </a>
        </li>
        {% set window = 5 %}
        {% set win_start = [page - window, 1] | max %}
        {% set win_end = [page + window, total_pages] | min %}
        {% if win_start > 1 %}
        <li class="page-item">
            <a class="page-link" href="/{{ view.name }}?page=1&q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">1</a>
        </li>
        {% if win_start > 2 %}
        <li class="page-item disabled"><span class="page-link">&hellip;</span></li>
        {% endif %}
        {% endif %}
        {% for p in range(win_start, win_end + 1) %}
        <li class="page-item {% if p == page %}active{% endif %}">
            <a class="page-link" href="/{{ view.name }}?page={{ p }}&q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">{{ p }}</a>
        </li>
        {% endfor %}
        {% if win_end < total_pages %}
        {% if win_end < total_pages - 1 %}
        <li class="page-item disabled"><span class="page-link">&hellip;</span></li>
        {% endif %}
        <li class="page-item">
            <a class="page-link" href="/{{ view.name }}?page={{ total_pages }}&q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">{{ total_pages }}</a>
        </li>
        {% endif %}
        <li class="page-item {% if page >= total_pages %}disabled{% endif %}">
            <a class="page-link" href="/{{ view.name }}?page={{ page + 1 }}&q={{ search }}&sort={{ sort }}&order={{ order }}{{ flt_qs }}">
                <i class="bi bi-chevron-right"></i>
            </a>
        </li>
    </ul>
</nav>
{% endif %}

{% if filter_defs %}
<script>
(function() {
    var addSelect  = document.getElementById('add-filter-select');
    var filterRow  = document.getElementById('new-filter-row');
    var colLabel   = document.getElementById('filter-col-label');
    var colValue   = document.getElementById('filter-col-value');
    var opSelect   = document.getElementById('filter-op');
    var valText    = document.getElementById('filter-val-text');
    var valSelect  = document.getElementById('filter-val-select');
    var btnApply   = document.getElementById('btn-apply-filter');
    var btnCancel  = document.getElementById('btn-cancel-filter');
    var isFk       = false;

    /* User picks a column from "Add Filter" */
    addSelect.addEventListener('change', function() {
        var opt = addSelect.options[addSelect.selectedIndex];
        var col = addSelect.value;
        if (!col) return;

        colLabel.textContent = opt.getAttribute('data-label') || col;
        colValue.value = col;
        filterRow.style.display = '';

        /* Build operation options */
        opSelect.innerHTML = '';
        var opsStr = opt.getAttribute('data-ops') || '';
        var pairs = opsStr.split('|');
        for (var i = 0; i < pairs.length; i++) {
            var kv = pairs[i].split(':');
            var o = document.createElement('option');
            o.value = kv[0];
            o.text = kv.slice(1).join(':');
            opSelect.appendChild(o);
        }

        /* FK column? Show select instead of text input */
        isFk = (opt.getAttribute('data-fk') === '1');
        if (isFk) {
            valText.style.display = 'none';
            valSelect.style.display = '';
            valSelect.innerHTML = '';
            var fkStr = opt.getAttribute('data-fk-choices') || '';
            var fkPairs = fkStr.split('||');
            for (var j = 0; j < fkPairs.length; j++) {
                if (!fkPairs[j]) continue;
                var fkKv = fkPairs[j].split('::');
                var fo = document.createElement('option');
                fo.value = fkKv[0];
                fo.text = fkKv.slice(1).join('::');
                valSelect.appendChild(fo);
            }
        } else {
            valText.style.display = '';
            valSelect.style.display = 'none';
            valText.value = '';
        }

        toggleValueVisibility();
        addSelect.selectedIndex = 0;
        opSelect.focus();
    });

    function toggleValueVisibility() {
        if (opSelect.value === 'empty') {
            valText.style.display = 'none';
            valSelect.style.display = 'none';
        } else if (isFk) {
            valText.style.display = 'none';
            valSelect.style.display = '';
        } else {
            valText.style.display = '';
            valSelect.style.display = 'none';
        }
    }

    opSelect.addEventListener('change', toggleValueVisibility);

    /* Apply */
    btnApply.addEventListener('click', function() {
        var col = colValue.value;
        var op  = opSelect.value;
        var val = isFk ? valSelect.value : valText.value;
        if (!col || !op) return;
        if (op !== 'empty' && !val) return;

        var url = new URL(window.location.href);
        var idx = 0;
        var keys = [];
        url.searchParams.forEach(function(v, k) { keys.push(k); });
        for (var i = 0; i < keys.length; i++) {
            var m = keys[i].match(/^flt(\d+)/);
            if (m) {
                var n = parseInt(m[1]) + 1;
                if (n > idx) idx = n;
            }
        }
        url.searchParams.set('flt' + idx + '_' + col + '_' + op, val);
        url.searchParams.set('page', '1');
        window.location.href = url.toString();
    });

    valText.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') { e.preventDefault(); btnApply.click(); }
    });

    btnCancel.addEventListener('click', function() {
        filterRow.style.display = 'none';
    });

    /* Remove filter badge */
    var removeBtns = document.querySelectorAll('.remove-filter');
    for (var r = 0; r < removeBtns.length; r++) {
        removeBtns[r].addEventListener('click', function(e) {
            e.preventDefault();
            var removeIdx = parseInt(this.getAttribute('data-idx'));
            var url = new URL(window.location.href);
            var filters = [];
            var allKeys = [];
            url.searchParams.forEach(function(v, k) { allKeys.push([k, v]); });
            for (var i = 0; i < allKeys.length; i++) {
                if (allKeys[i][0].indexOf('flt') === 0) filters.push(allKeys[i]);
            }
            for (var i = 0; i < filters.length; i++) url.searchParams.delete(filters[i][0]);
            filters.sort(function(a, b) {
                return parseInt(a[0].match(/^flt(\d+)/)[1]) - parseInt(b[0].match(/^flt(\d+)/)[1]);
            });
            var ni = 0;
            for (var i = 0; i < filters.length; i++) {
                if (i !== removeIdx) {
                    var suffix = filters[i][0].replace(/^flt\d+/, '');
                    url.searchParams.set('flt' + ni + suffix, filters[i][1]);
                    ni++;
                }
            }
            url.searchParams.set('page', '1');
            window.location.href = url.toString();
        });
    }
})();
</script>
{% endif %}
{% endblock %}