{% extends "admin/layout.html" %}
{% block title %}File Management – Admin{% endblock %}
{% block body %}
{# ─── URL / sort macros ─────────────────────────────────────────────────────── #}
{% macro up_page_url(p) %}?tab=uploads&search={{ search|urlencode }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}&per_page={{ per_page }}&deleted={{ '1' if include_deleted else '0' }}&page={{ p }}{% endmacro %}
{% macro up_sort_url(col) %}{% set nd = 'asc' if (sort_by == col and sort_dir == 'desc') else 'desc' %}?tab=uploads&search={{ search|urlencode }}&sort_by={{ col }}&sort_dir={{ nd }}&per_page={{ per_page }}&deleted={{ '1' if include_deleted else '0' }}&page=1{% endmacro %}
{% macro up_sort_icon(col) %}{% if sort_by == col %}<i class="fa fa-arrow-{{ 'up' if sort_dir == 'asc' else 'down' }} text-indigo-500 text-[10px] ml-1"></i>{% else %}<i class="fa fa-arrows-up-down text-gray-300 dark:text-gray-600 text-[10px] ml-1"></i>{% endif %}{% endmacro %}
{% macro conv_page_url(p) %}?tab=conversions&conv_search={{ conv_search|urlencode }}&conv_sort_by={{ conv_sort_by }}&conv_sort_dir={{ conv_sort_dir }}&conv_per_page={{ conv_per_page }}&conv_deleted={{ '1' if include_deleted_convs else '0' }}&conv_page={{ p }}{% endmacro %}
{% macro conv_sort_url(col) %}{% set nd = 'asc' if (conv_sort_by == col and conv_sort_dir == 'desc') else 'desc' %}?tab=conversions&conv_search={{ conv_search|urlencode }}&conv_sort_by={{ col }}&conv_sort_dir={{ nd }}&conv_per_page={{ conv_per_page }}&conv_deleted={{ '1' if include_deleted_convs else '0' }}&conv_page=1{% endmacro %}
{% macro conv_sort_icon(col) %}{% if conv_sort_by == col %}<i class="fa fa-arrow-{{ 'up' if conv_sort_dir == 'asc' else 'down' }} text-indigo-500 text-[10px] ml-1"></i>{% else %}<i class="fa fa-arrows-up-down text-gray-300 dark:text-gray-600 text-[10px] ml-1"></i>{% endif %}{% endmacro %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-file-management">{% trans %}File Management{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            {% trans %}Uploads:{% endtrans %} <strong data-testid="text-total-files">{{ total }}</strong>
            {% trans %}&nbsp;·&nbsp; Conversions:{% endtrans %} <strong data-testid="text-total-conversions">{{ conv_total }}</strong>
        </p>
    </div>
    <div class="flex flex-wrap items-center gap-3" id="uploads-actions">
        <a href="?tab=uploads&search={{ search|urlencode }}&sort_by={{ sort_by }}&sort_dir={{ sort_dir }}&per_page={{ per_page }}&deleted={{ '0' if include_deleted else '1' }}&page=1" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-toggle-deleted">
            {% if include_deleted %}<i class="fa fa-eye-slash mr-1"></i>{% trans %}Hide Deleted{% endtrans %}{% else %}<i class="fa fa-eye mr-1"></i>{% trans %}Show Deleted{% endtrans %}{% endif %}
        </a>
        <label class="flex items-center gap-1.5 text-xs text-gray-600 dark:text-gray-400 cursor-pointer select-none" title="When checked, conversion history linked to the deleted uploads is also removed">
            <input type="checkbox" id="cb-also-delete-conv" class="rounded border-gray-300 dark:border-gray-600 text-red-600 focus:ring-red-500">
            {% trans %}Also delete conversion history{% endtrans %}
        </label>
        <button id="btn-delete-selected" class="hidden px-4 py-2 rounded-lg bg-orange-600 hover:bg-orange-700 text-white text-sm font-semibold transition-all" onclick="submitSelected()" data-testid="btn-delete-selected-files">
            <i class="fa fa-trash mr-1"></i>{% trans %}Delete Selected ({% endtrans %}<span id="selected-count">0</span>)
        </button>
        <button id="btn-delete-all" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all" onclick="confirmDeleteAll()" data-testid="btn-delete-all-files">
            <i class="fa fa-trash mr-1"></i>{% trans %}Delete All{% endtrans %}
        </button>
        <button id="btn-empty-all" class="px-4 py-2 rounded-lg bg-gray-900 hover:bg-black dark:bg-red-950 dark:hover:bg-red-900 border border-red-700 text-red-400 text-sm font-semibold transition-all" onclick="document.getElementById('modal-empty-all').classList.remove('hidden')" data-testid="btn-empty-all-files">
            <i class="fa fa-database mr-1"></i>{% trans %}Empty All Files{% endtrans %}
        </button>
    </div>
</div>

<!-- Empty-All confirmation modal -->
<div id="modal-empty-all" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl border border-red-300 dark:border-red-800 w-full max-w-md mx-4 p-6">
        <div class="flex items-center gap-3 mb-4">
            <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/40 flex items-center justify-center flex-shrink-0">
                <i class="fa fa-triangle-exclamation text-red-600 dark:text-red-400 text-lg"></i>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900 dark:text-white">{% trans %}Empty All Files{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400">{% trans %}This cannot be undone{% endtrans %}</p>
            </div>
        </div>
        <p class="text-sm text-gray-700 dark:text-gray-300 mb-4">
            {% trans %}This will permanently delete <strong>all conversion records</strong>, <strong>all upload records</strong>, and <strong>all physical files</strong> from the uploads directory. User accounts and settings are not affected.{% endtrans %}
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">{% trans %}Type{% endtrans %} <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded font-mono">EMPTY</code> {% trans %}to confirm{% endtrans %}:</p>
        <input type="text" id="empty-all-confirm-input" autocomplete="off" placeholder="EMPTY" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-white mb-4 focus:outline-none focus:ring-2 focus:ring-red-500">
        <div class="flex gap-3 justify-end">
            <button type="button" onclick="document.getElementById('modal-empty-all').classList.add('hidden');document.getElementById('empty-all-confirm-input').value=''" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all">{% trans %}Cancel{% endtrans %}</button>
            <button type="button" onclick="submitEmptyAll()" class="px-4 py-2 rounded-lg bg-red-600 hover:bg-red-700 text-white text-sm font-semibold transition-all" data-testid="btn-empty-all-confirm">
                <i class="fa fa-trash mr-1"></i>{% trans %}Empty Everything{% endtrans %}
            </button>
        </div>
    </div>
</div>
<form id="empty-all-form" method="POST" action="{{ full_url('/admin/files/empty-all') }}" style="display:none"></form>

<!-- Storage Stats -->
{% if storage %}
<div class="mb-6 grid grid-cols-1 sm:grid-cols-3 gap-4">
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-database text-indigo-600 dark:text-indigo-400"></i>
        </div>
        <div>
            <div class="text-xs text-gray-500 uppercase tracking-wide">{% trans %}Uploads Storage{% endtrans %}</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white" data-testid="text-upload-storage">{{ fmt_bytes(storage.uploads_bytes) }}</div>
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-arrows-rotate text-purple-600 dark:text-purple-400"></i>
        </div>
        <div>
            <div class="text-xs text-gray-500 uppercase tracking-wide">{% trans %}Conversions Storage{% endtrans %}</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white" data-testid="text-conv-storage">{{ fmt_bytes(storage.conversions_bytes) }}</div>
        </div>
    </div>
    <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-4 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0">
            <i class="fa fa-hdd text-green-600 dark:text-green-400"></i>
        </div>
        <div>
            <div class="text-xs text-gray-500 uppercase tracking-wide">{% trans %}Total Storage Used{% endtrans %}</div>
            <div class="text-lg font-bold text-gray-900 dark:text-white" data-testid="text-total-storage">{{ fmt_bytes((storage.uploads_bytes or 0) + (storage.conversions_bytes or 0)) }}</div>
        </div>
    </div>
</div>
{% endif %}

<!-- Tabs -->
<div class="flex gap-1 mb-5 border-b border-gray-200 dark:border-gray-700">
    <button onclick="switchTab('uploads')" id="tab-uploads"
        class="px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
        {{ 'border-blue-500 text-blue-600 dark:text-blue-400' if active_tab != 'conversions' else 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700' }}"
        data-testid="tab-uploads">
        <i class="fa fa-file-arrow-up mr-1.5"></i>{% trans %}Uploads{% endtrans %} ({{ total }})
    </button>
    <button onclick="switchTab('conversions')" id="tab-conversions"
        class="px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors
        {{ 'border-purple-500 text-purple-600 dark:text-purple-400' if active_tab == 'conversions' else 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700' }}"
        data-testid="tab-conversions">
        <i class="fa fa-arrows-rotate mr-1.5"></i>{% trans %}Conversions{% endtrans %} ({{ conv_total }})
    </button>
</div>

<!-- Uploads Panel -->
<div id="panel-uploads" {% if active_tab == 'conversions' %}class="hidden"{% endif %}>

<!-- Uploads toolbar -->
<form method="GET" action="" class="mb-4 p-3 bg-gray-50 dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 flex flex-wrap items-end gap-3" data-testid="form-uploads-filters">
    <input type="hidden" name="tab" value="uploads">
    <input type="hidden" name="deleted" value="{{ '1' if include_deleted else '0' }}">
    <div class="flex-1 min-w-[180px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Search{% endtrans %}</label>
        <div class="relative">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
            <input type="text" name="search" value="{{ search }}" placeholder="{% trans %}File name or user...{% endtrans %}"
                class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
                data-testid="input-uploads-search">
        </div>
    </div>
    <div class="min-w-[110px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Per page{% endtrans %}</label>
        <select name="per_page" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500" data-testid="select-uploads-per-page">
            {% for n in [10, 25, 50, 100] %}<option value="{{ n }}" {% if n == per_page %}selected{% endif %}>{{ n }}</option>{% endfor %}
        </select>
    </div>
    <input type="hidden" name="sort_by" value="{{ sort_by }}">
    <input type="hidden" name="sort_dir" value="{{ sort_dir }}">
    <div class="flex gap-2 flex-shrink-0">
        <button type="submit" class="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all" data-testid="btn-apply-uploads-filters">
            <i class="fa fa-filter mr-1"></i>{% trans %}Apply{% endtrans %}
        </button>
        <a href="?tab=uploads" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-reset-uploads-filters">
            <i class="fa fa-xmark mr-1"></i>{% trans %}Reset{% endtrans %}
        </a>
    </div>
</form>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if files %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left w-8"><input type="checkbox" id="check-all-uploads" class="rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" data-testid="check-all-uploads"></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ up_sort_url('file_name') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">{% trans %}File{% endtrans %}{{ up_sort_icon('file_name') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ up_sort_url('username') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">{% trans %}User{% endtrans %}{{ up_sort_icon('username') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ up_sort_url('file_size') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">{% trans %}Size{% endtrans %}{{ up_sort_icon('file_size') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide">{% trans %}Status{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ up_sort_url('uploaded_at') }}" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">{% trans %}Date{% endtrans %}{{ up_sort_icon('uploaded_at') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide">{% trans %}Actions{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for f in files %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-upload-{{ f.id }}">
                    <td class="px-4 py-3"><input type="checkbox" class="upload-check rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-500" value="{{ f.id }}" data-testid="check-upload-{{ f.id }}"></td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200 max-w-[200px] truncate" title="{{ f.file_name }}" data-testid="text-upload-name-{{ f.id }}">{{ f.file_name or '—' }}</div>
                        {% if f.get('input_format') or f.get('output_format') %}
                        <div class="text-xs text-gray-500 mt-0.5">
                            <span class="uppercase font-medium text-blue-500">{{ f.get('input_format','?') }}</span>
                            → <span class="uppercase font-medium text-green-500">{{ f.get('output_format','?') }}</span>
                        </div>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        {% if f.user_id %}
                        <a href="{{ full_url('/admin/users/' ~ f.user_id) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline text-xs" data-testid="link-upload-user-{{ f.id }}">{{ f.get('username','#' + (f.user_id|string)) }}</a>
                        {% else %}
                        <span class="text-gray-400 text-xs">{% trans %}Guest{% endtrans %}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-600 dark:text-gray-400" data-testid="text-upload-size-{{ f.id }}">{{ fmt_bytes(f.file_size) if f.get('file_size') else '—' }}</td>
                    <td class="px-4 py-3">
                        <span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold uppercase
                            {% if f.deleted_at %}bg-gray-100 dark:bg-gray-700 text-gray-500
                            {% elif f.get('status') == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% else %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400{% endif %}">
                            {% if f.deleted_at %}{% trans %}deleted{% endtrans %}{% else %}{{ f.get('status','—') }}{% endif %}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500" data-testid="text-upload-date-{{ f.id }}">{{ (f.uploaded_at or f.get('created_at','—'))[:16] }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1 flex-wrap">
                            <button onclick="showUploadDetail({{ f.id }})"
                                class="px-2 py-1 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all"
                                data-testid="btn-upload-detail-{{ f.id }}">
                                <i class="fa fa-info-circle"></i>
                            </button>
                            {% if not f.deleted_at %}
                            <a href="{{ full_url('/admin/files/download/' ~ f.id) }}"
                               class="px-2 py-1 rounded text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-400 hover:bg-blue-100 transition-all"
                               title="{% trans %}Download original file{% endtrans %}" data-testid="btn-download-orig-{{ f.id }}">
                                <i class="fa fa-file-arrow-down"></i>
                            </a>
                            {% endif %}
                            {% if f.get('conv_id') and f.get('conv_output_path') %}
                            <a href="{{ full_url('/admin/conversions/download/' ~ f.conv_id) }}"
                               class="px-2 py-1 rounded text-xs bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-100 transition-all"
                               title="{% trans %}Download converted file{% endtrans %}" data-testid="btn-download-conv-{{ f.id }}">
                                <i class="fa fa-download"></i>
                            </a>
                            {% endif %}
                            {% if not f.deleted_at %}
                            <form method="POST" action="{{ full_url('/admin/files/delete/' ~ f.id) }}" data-confirm="Delete upload #{{ f.id }}?&#10;&#10;• Removes the physical file from disk&#10;• Removes the upload database record" class="inline">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-red-50 dark:bg-red-900/20 text-red-600 hover:bg-red-100 transition-all" data-testid="btn-delete-upload-{{ f.id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                            {% else %}
                            <form method="POST" action="{{ full_url('/admin/files/purge/' ~ f.id) }}" data-confirm="Permanently purge upload #{{ f.id }}?&#10;&#10;• Physical file deleted from disk&#10;• Upload record removed&#10;• All linked conversion records deleted&#10;• All shared links revoked" class="inline">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-400 hover:bg-red-200 transition-all font-semibold" title="{% trans %}Permanently delete{% endtrans %}" data-testid="btn-purge-upload-{{ f.id }}">
                                    <i class="fa fa-trash-can"></i> {% trans %}Purge{% endtrans %}
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {# ── Uploads numbered pagination ── #}
    {% set _us = (page - 1) * per_page + 1 %}{% set _ue = [page * per_page, total]|min %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex flex-wrap items-center justify-between gap-3">
        <span class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-uploads-pagination-info">
            {% if total > 0 %}{% trans %}Showing{% endtrans %} {{ _us }}–{{ _ue }} {% trans %}of{% endtrans %} {{ total }}{% else %}{% trans %}No results{% endtrans %}{% endif %}
        </span>
        {% if total_pages > 1 %}
        <div class="flex items-center gap-1 flex-wrap" data-testid="pagination-uploads">
            {% if page > 1 %}
            <a href="{{ up_page_url(1) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-uploads-first">«</a>
            <a href="{{ up_page_url(page - 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-uploads-prev">‹ {% trans %}Prev{% endtrans %}</a>
            {% endif %}
            {% set _lo = [1, page - 2]|max %}{% set _hi = [total_pages, page + 2]|min %}
            {% if _lo > 1 %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {% for p in range(_lo, _hi + 1) %}
            <a href="{{ up_page_url(p) }}" class="px-3 py-1 rounded border text-xs transition-all {% if p == page %}bg-indigo-600 border-indigo-600 text-white font-bold{% else %}border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}" data-testid="btn-uploads-page-{{ p }}">{{ p }}</a>
            {% endfor %}
            {% if _hi < total_pages %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {% if page < total_pages %}
            <a href="{{ up_page_url(page + 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-uploads-next">{% trans %}Next{% endtrans %} ›</a>
            <a href="{{ up_page_url(total_pages) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-uploads-last">»</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="py-12 text-center text-gray-500 dark:text-gray-400 text-sm" data-testid="text-no-uploads">{% trans %}No uploads found.{% endtrans %}</div>
    {% endif %}
</div>
</div>

<!-- Conversions Panel -->
<div id="panel-conversions" {% if active_tab != 'conversions' %}class="hidden"{% endif %}>

<!-- Conversions toolbar -->
<form method="GET" action="" class="mb-4 p-3 bg-gray-50 dark:bg-gray-800/60 rounded-xl border border-gray-200 dark:border-gray-700 flex flex-wrap items-end gap-3" data-testid="form-conv-filters">
    <input type="hidden" name="tab" value="conversions">
    <input type="hidden" name="conv_deleted" value="{{ '1' if include_deleted_convs else '0' }}">
    <div class="flex-1 min-w-[180px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Search{% endtrans %}</label>
        <div class="relative">
            <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xs"></i>
            <input type="text" name="conv_search" value="{{ conv_search }}" placeholder="{% trans %}Format or user...{% endtrans %}"
                class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500"
                data-testid="input-conv-search">
        </div>
    </div>
    <div class="min-w-[110px]">
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{% trans %}Per page{% endtrans %}</label>
        <select name="conv_per_page" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-purple-500" data-testid="select-conv-per-page">
            {% for n in [10, 25, 50, 100] %}<option value="{{ n }}" {% if n == conv_per_page %}selected{% endif %}>{{ n }}</option>{% endfor %}
        </select>
    </div>
    <input type="hidden" name="conv_sort_by" value="{{ conv_sort_by }}">
    <input type="hidden" name="conv_sort_dir" value="{{ conv_sort_dir }}">
    <div class="flex gap-2 flex-shrink-0">
        <button type="submit" class="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all" data-testid="btn-apply-conv-filters">
            <i class="fa fa-filter mr-1"></i>{% trans %}Apply{% endtrans %}
        </button>
        <a href="?tab=conversions" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-reset-conv-filters">
            <i class="fa fa-xmark mr-1"></i>{% trans %}Reset{% endtrans %}
        </a>
        <a href="?tab=conversions&conv_search={{ conv_search|urlencode }}&conv_sort_by={{ conv_sort_by }}&conv_sort_dir={{ conv_sort_dir }}&conv_per_page={{ conv_per_page }}&conv_deleted={{ '0' if include_deleted_convs else '1' }}&conv_page=1" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-700 text-sm font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all" data-testid="btn-toggle-deleted-convs">
            {% if include_deleted_convs %}<i class="fa fa-eye-slash mr-1"></i>{% trans %}Hide Deleted{% endtrans %}{% else %}<i class="fa fa-eye mr-1"></i>{% trans %}Show Deleted{% endtrans %}{% endif %}
        </a>
    </div>
</form>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    {% if conversions %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-800">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('id') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}ID{% endtrans %}{{ conv_sort_icon('id') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide">{% trans %}File{% endtrans %}</th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('input_format') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}Input{% endtrans %}{{ conv_sort_icon('input_format') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('output_format') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}Output{% endtrans %}{{ conv_sort_icon('output_format') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('username') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}User{% endtrans %}{{ conv_sort_icon('username') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('status') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}Status{% endtrans %}{{ conv_sort_icon('status') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide"><a href="{{ conv_sort_url('created_at') }}" class="hover:text-purple-600 dark:hover:text-purple-400 transition-colors">{% trans %}Date{% endtrans %}{{ conv_sort_icon('created_at') }}</a></th>
                    <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase tracking-wide">{% trans %}Actions{% endtrans %}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for c in conversions %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors" data-testid="row-conv-{{ c.id }}">
                    <td class="px-4 py-3 text-gray-500 text-xs font-mono">#{{ c.id }}</td>
                    <td class="px-4 py-3">
                        <div class="font-medium text-gray-800 dark:text-gray-200 max-w-[180px] truncate" title="{{ c.get('file_name','') }}" data-testid="text-conv-file-{{ c.id }}">
                            {{ c.get('file_name') or c.get('input_file','—') }}
                        </div>
                        {% if c.get('file_size') %}<div class="text-xs text-gray-400">{{ fmt_bytes(c.file_size) }}</div>{% endif %}
                    </td>
                    <td class="px-4 py-3" data-testid="text-conv-input-{{ c.id }}">
                        <span class="px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs font-medium uppercase">{{ c.get('input_format','?') }}</span>
                    </td>
                    <td class="px-4 py-3" data-testid="text-conv-output-{{ c.id }}">
                        <span class="px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 text-xs font-medium uppercase">{{ c.get('output_format','?') }}</span>
                    </td>
                    <td class="px-4 py-3">
                        {% if c.get('user_id') %}
                        <a href="{{ full_url('/admin/users/' ~ c.user_id) }}" class="text-indigo-600 dark:text-indigo-400 hover:underline text-xs" data-testid="link-conv-user-{{ c.id }}">{{ c.get('username','#' + (c.user_id|string)) }}</a>
                        {% else %}
                        <span class="text-gray-400 text-xs">{% trans %}Guest{% endtrans %}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-block px-2 py-0.5 rounded text-[10px] font-semibold uppercase
                            {% if c.get('status') == 'finished' %}bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400
                            {% elif c.get('status') in ['pending','queued','processing'] %}bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400
                            {% elif c.get('status') == 'expired' %}bg-gray-100 dark:bg-gray-700 text-gray-500
                            {% elif c.get('status') == 'deleted' %}bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400
                            {% elif c.get('status') == 'cancelled' %}bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400
                            {% else %}bg-red-100 dark:bg-red-900/30 text-red-600{% endif %}">
                            {{ c.get('status','—') }}
                        </span>
                        {% if c.get('status') != 'deleted' and not c.get('upload_id') %}<span class="inline-block px-1.5 py-0.5 rounded text-[9px] font-semibold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">{% trans %}Upload del{% endtrans %}</span>{% endif %}
                        {% if c.get('status') not in ['deleted','expired','cancelled'] and c.get('upload_id') and not c.get('output_path') %}<span class="inline-block px-1.5 py-0.5 rounded text-[9px] font-semibold bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400">{% trans %}Output del{% endtrans %}</span>{% endif %}
                    </td>
                    <td class="px-4 py-3 text-xs text-gray-500">{{ (c.get('created_at','—'))[:16] }}</td>
                    <td class="px-4 py-3">
                        <div class="flex items-center gap-1.5">
                            <button onclick="showConvDetail({{ c.id }})"
                                class="px-2 py-1 rounded text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-all"
                                data-testid="btn-conv-detail-{{ c.id }}">
                                <i class="fa fa-info-circle"></i> {% trans %}Info{% endtrans %}
                            </button>
                            {% if c.get('output_path') and c.get('status') not in ['deleted', 'expired'] %}
                            <a href="{{ full_url('/admin/conversions/download/' ~ c.id) }}"
                               class="px-2 py-1 rounded text-xs bg-green-50 dark:bg-green-900/20 text-green-700 hover:bg-green-100 transition-all"
                               title="{% trans %}Download converted file{% endtrans %}" data-testid="btn-conv-download-{{ c.id }}">
                                <i class="fa fa-download"></i>
                            </a>
                            {% endif %}
                            {% if c.get('status') == 'failed' and c.get('upload_id') %}
                            <form method="POST" action="{{ full_url('/admin/conversions/retry/' ~ c.id) }}" data-confirm="Re-queue this conversion?&#10;&#10;• The job will be added back to the processing queue&#10;• A new conversion attempt will start shortly">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 hover:bg-teal-100 dark:hover:bg-teal-900/40 transition-all" title="{% trans %}Retry this conversion{% endtrans %}" data-testid="btn-conv-retry-{{ c.id }}">
                                    <i class="fa fa-rotate-right"></i>
                                </button>
                            </form>
                            {% endif %}
                            <form method="POST" action="{{ full_url('/admin/conversions/delete/' ~ c.id) }}" data-confirm="Delete this conversion record?&#10;&#10;• Output file removed from storage&#10;• Conversion record deleted&#10;• Shared links revoked">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 transition-all" title="{% trans %}Delete this conversion{% endtrans %}" data-testid="btn-conv-delete-{{ c.id }}">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {# ── Conversions numbered pagination ── #}
    {% set _cs = (conv_page - 1) * conv_per_page + 1 %}{% set _ce = [conv_page * conv_per_page, conv_total]|min %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex flex-wrap items-center justify-between gap-3">
        <span class="text-sm text-gray-500 dark:text-gray-400" data-testid="text-conv-pagination-info">
            {% if conv_total > 0 %}{% trans %}Showing{% endtrans %} {{ _cs }}–{{ _ce }} {% trans %}of{% endtrans %} {{ conv_total }}{% else %}{% trans %}No results{% endtrans %}{% endif %}
        </span>
        {% if conv_total_pages > 1 %}
        <div class="flex items-center gap-1 flex-wrap" data-testid="pagination-conversions">
            {% if conv_page > 1 %}
            <a href="{{ conv_page_url(1) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-conv-first">«</a>
            <a href="{{ conv_page_url(conv_page - 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-conv-prev">‹ {% trans %}Prev{% endtrans %}</a>
            {% endif %}
            {% set _clo = [1, conv_page - 2]|max %}{% set _chi = [conv_total_pages, conv_page + 2]|min %}
            {% if _clo > 1 %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {% for p in range(_clo, _chi + 1) %}
            <a href="{{ conv_page_url(p) }}" class="px-3 py-1 rounded border text-xs transition-all {% if p == conv_page %}bg-purple-600 border-purple-600 text-white font-bold{% else %}border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800{% endif %}" data-testid="btn-conv-page-{{ p }}">{{ p }}</a>
            {% endfor %}
            {% if _chi < conv_total_pages %}<span class="px-1 text-gray-400 text-xs">…</span>{% endif %}
            {% if conv_page < conv_total_pages %}
            <a href="{{ conv_page_url(conv_page + 1) }}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-conv-next">{% trans %}Next{% endtrans %} ›</a>
            <a href="{{ conv_page_url(conv_total_pages) }}" class="px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-800" data-testid="btn-conv-last">»</a>
            {% endif %}
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="py-12 text-center text-gray-500 dark:text-gray-400 text-sm" data-testid="text-no-conversions">{% trans %}No conversions found.{% endtrans %}</div>
    {% endif %}
</div>
</div>

<!-- Detail Modal (shared) -->
<div id="detail-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-black/60">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-lg max-h-[80vh] overflow-y-auto">
        <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
            <h3 class="font-bold text-gray-900 dark:text-white" id="modal-title">{% trans %}Details{% endtrans %}</h3>
            <button onclick="closeModal()" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none" data-testid="btn-close-modal">✕</button>
        </div>
        <div class="px-6 py-4" id="modal-body">
            <div class="text-center text-gray-400 py-8">{% trans %}Loading...{% endtrans %}</div>
        </div>
    </div>
</div>

<!-- Batch delete form -->
<form id="batch-delete-form" method="POST" action="{{ full_url('/admin/files/delete-selected') }}" style="display:none">
    <input type="hidden" name="also_delete_conversions" id="batch-also-conv" value="0">
    <div id="batch-ids-container"></div>
</form>

<!-- Delete-all form (POST) -->
<form id="delete-all-form" method="POST" action="{{ full_url('/admin/files/delete-all') }}" style="display:none">
    <input type="hidden" name="also_delete_conversions" id="delete-all-also-conv" value="0">
</form>

<script>
var activeTab = '{{ active_tab if active_tab else "uploads" }}';

function switchTab(name) {
    ['uploads', 'conversions'].forEach(function(t) {
        var panel = document.getElementById('panel-' + t);
        var btn = document.getElementById('tab-' + t);
        if (t === name) {
            panel.classList.remove('hidden');
            if (t === 'uploads') {
                btn.className = 'px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-blue-500 text-blue-600 dark:text-blue-400';
            } else {
                btn.className = 'px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-purple-500 text-purple-600 dark:text-purple-400';
            }
        } else {
            panel.classList.add('hidden');
            btn.className = 'px-5 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700';
        }
    });
    activeTab = name;
    // Update URL so the active tab is bookmarkable
    var url = new URL(window.location.href);
    url.searchParams.set('tab', name);
    history.replaceState(null, '', url.toString());
}

// Checkbox logic
var checkAllUploads = document.getElementById('check-all-uploads');
var deleteSelectedBtn = document.getElementById('btn-delete-selected');
var selectedCountEl = document.getElementById('selected-count');
if (checkAllUploads) {
    checkAllUploads.addEventListener('change', function() {
        document.querySelectorAll('.upload-check').forEach(function(cb) { cb.checked = checkAllUploads.checked; });
        updateSelectedCount();
    });
}
document.querySelectorAll('.upload-check').forEach(function(cb) {
    cb.addEventListener('change', updateSelectedCount);
});
function updateSelectedCount() {
    var count = document.querySelectorAll('.upload-check:checked').length;
    if (deleteSelectedBtn) {
        if (count > 0) { deleteSelectedBtn.classList.remove('hidden'); } else { deleteSelectedBtn.classList.add('hidden'); }
    }
    if (selectedCountEl) { selectedCountEl.textContent = count; }
}
var _viewingDeleted = {{ include_deleted | tojson }};
function submitSelected() {
    var checked = document.querySelectorAll('.upload-check:checked');
    if (!checked.length) { toastr.warning('No files selected.'); return; }
    var alsoConv = document.getElementById('cb-also-delete-conv') && document.getElementById('cb-also-delete-conv').checked;
    var action = _viewingDeleted ? '{{ full_url("/admin/files/purge-selected") }}' : '{{ full_url("/admin/files/delete-selected") }}';
    var msg = _viewingDeleted
        ? 'Permanently purge ' + checked.length + ' selected record(s)?\n\n\u2022 Physical files deleted from disk\n\u2022 All upload and conversion records removed'
        : 'Delete ' + checked.length + ' selected upload(s)?\n\n\u2022 Physical files deleted from disk\n\u2022 Upload records removed';
    if (alsoConv) msg += '\n\u2022 All linked conversion history will also be deleted.';
    window.ocConfirm(msg, function() {
        var form = document.getElementById('batch-delete-form');
        form.action = action;
        document.getElementById('batch-also-conv').value = alsoConv ? '1' : '0';
        var container = document.getElementById('batch-ids-container');
        container.innerHTML = '';
        checked.forEach(function(cb) {
            var inp = document.createElement('input');
            inp.type='hidden'; inp.name='ids'; inp.value=cb.value;
            container.appendChild(inp);
        });
        if (!_viewingDeleted) {
            var kd = document.createElement('input');
            kd.type='hidden'; kd.name='keep_deleted'; kd.value='0';
            container.appendChild(kd);
        }
        form.submit();
    });
}
function confirmDeleteAll() {
    var alsoConv = document.getElementById('cb-also-delete-conv') && document.getElementById('cb-also-delete-conv').checked;
    var action = _viewingDeleted ? '{{ full_url("/admin/files/purge-all") }}' : '{{ full_url("/admin/files/delete-all") }}';
    var msg = _viewingDeleted
        ? 'Permanently delete ALL records?\n\n\u2022 All physical files deleted from disk\n\u2022 All upload and conversion records removed'
        : 'Delete ALL upload records?\n\n\u2022 All physical files deleted from disk\n\u2022 All upload records removed';
    if (alsoConv) msg += '\n\u2022 All conversion history for every upload will also be deleted.';
    window.ocConfirm(msg, function() {
        var form = document.getElementById('delete-all-form');
        form.action = action;
        document.getElementById('delete-all-also-conv').value = alsoConv ? '1' : '0';
        form.submit();
    });
}

// Detail modal
var modal = document.getElementById('detail-modal');
var modalTitle = document.getElementById('modal-title');
var modalBody = document.getElementById('modal-body');
function showUploadDetail(id) {
    modalTitle.textContent = 'Upload #' + id;
    modalBody.innerHTML = '<div class="text-center text-gray-400 py-8"><i class="fa fa-spinner fa-spin text-2xl"></i></div>';
    modal.classList.remove('hidden');
    fetch('/admin/files/detail/' + id)
        .then(function(r) { return r.json(); })
        .then(function(d) { renderDetail(d); })
        .catch(function() { modalBody.innerHTML = '<p class="text-red-500">Failed to load details.</p>'; });
}
function showConvDetail(id) {
    modalTitle.textContent = 'Conversion #' + id;
    modalBody.innerHTML = '<div class="text-center text-gray-400 py-8"><i class="fa fa-spinner fa-spin text-2xl"></i></div>';
    modal.classList.remove('hidden');
    fetch('/admin/conversions/detail/' + id)
        .then(function(r) { return r.json(); })
        .then(function(d) { renderDetail(d); })
        .catch(function() { modalBody.innerHTML = '<p class="text-red-500">Failed to load details.</p>'; });
}
function renderDetail(d) {
    var skip = ['id'];
    var html = '<dl class="divide-y divide-gray-100 dark:divide-gray-800">';
    Object.keys(d).forEach(function(k) {
        var v = d[k];
        if (v === null || v === undefined || v === '') return;
        html += '<div class="flex gap-3 py-2"><dt class="text-xs font-medium text-gray-500 dark:text-gray-400 w-36 flex-shrink-0 mt-0.5">' + k + '</dt>';
        html += '<dd class="text-sm text-gray-800 dark:text-gray-200 break-all">' + (String(v).length > 200 ? String(v).slice(0,200)+'…' : v) + '</dd></div>';
    });
    html += '</dl>';
    modalBody.innerHTML = html;
}
function closeModal() {
    modal.classList.add('hidden');
    modalBody.innerHTML = '<div class="text-center text-gray-400 py-8">Loading...</div>';
}
modal.addEventListener('click', function(e) { if (e.target === modal) closeModal(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModal(); });

function submitEmptyAll() {
    var val = (document.getElementById('empty-all-confirm-input').value || '').trim();
    if (val !== 'EMPTY') {
        document.getElementById('empty-all-confirm-input').classList.add('ring-2', 'ring-red-500');
        return;
    }
    document.getElementById('empty-all-form').submit();
}
</script>
{% endblock %}