{% extends "base.html" %}
{% from "fragments/_chips.html" import chip, needs_review_chip %}
{% block title %}Voxint — media{% endblock %}

{% block cb_breadcrumb %}media /{% endblock %}
{% block cb_summary %}
<span id="cb-summary">
{%- if not paginated and media_summary.folder_count %}{{ media_summary.folder_count }} folder{{ "s" if media_summary.folder_count != 1 else "" }} · {% endif -%}
{{ total_count }} recording{{ "s" if total_count != 1 else "" }}{% if not paginated %} · {{ media_summary.total_hours }}{% endif %}
</span>
{%- endblock %}
{% block cb_actions %}
{% set _fqs %}{% if search %}&q={{ search|urlencode }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% endset %}
<nav class="view-toggle" aria-label="Show as">
  {% for value in views %}
  <a href="/media?sort={{ sort }}&view={{ value }}{% if trashed %}&trashed=1{% elif archived %}&archived=1{% endif %}{{ _fqs }}"{% if value == view %} aria-current="true"{% endif %}>{{ value|capitalize }}</a>
  {% endfor %}
</nav>
{% if not archived and not trashed and shell.can_write %}
<div class="add-media-dd" data-dropdown>
  <button type="button" class="cb-btn cb-btn-primary" data-dropdown-toggle aria-expanded="false" aria-haspopup="true">+ Add media</button>
  <div class="add-media-menu" data-dropdown-menu hidden>
    <button type="button" class="add-media-choice" data-show-panel="upload-panel">
      <strong>Upload from this computer</strong>
      <span class="oc-muted">drag &amp; drop works anywhere on this page</span>
    </button>
    <button type="button" class="add-media-choice" data-show-panel="server-panel">
      <strong>Pick from the server</strong>
      <span class="oc-muted">browse folders Voxint can already see</span>
    </button>
    <button type="button" class="add-media-choice" data-show-panel="fetch-panel">
      <strong>Fetch from a link</strong>
      <span class="oc-muted">downloads on your machine, nothing shared</span>
    </button>
  </div>
</div>
{% endif %}
{% endblock %}

{% block body %}
{# Query-string suffix carrying the current search and status filter,
   appended to sort/view/folder links so navigation preserves the filter. #}
{% set filter_qs %}{% if search %}&q={{ search|urlencode }}{% endif %}{% if status %}&status={{ status }}{% endif %}{% endset %}

{# Status chip for a media item — shared by table rows and cards to prevent drift. #}
{% macro media_status(row) %}
  {%- if row.latest_run_id -%}
    {%- if row.unresolved_count -%}
    {{ needs_review_chip(row.unresolved_count) }}
    {%- elif row.latest_run_status == "completed" -%}
    {{ chip("reviewed") }}
    {%- else -%}
    {{ chip(humanize_status(row.latest_run_status)) }}
    {%- endif -%}
  {%- else -%}<span class="oc-muted">—</span>{%- endif -%}
{% endmacro %}

{# File-missing notice — plain language with the expected path and a Remove action. #}
{% macro file_missing_notice(row) %}
  {%- if row.id in missing_file_ids -%}
  <span class="file-missing-notice">
    <span class="chip chip-danger">Original file not found</span>
    <code class="file-missing-path" title="{{ row.current_path or row.source_path }}">{{ row.current_path or row.source_path }}</code>
  </span>
  {%- endif -%}
{% endmacro %}

{# Row action verb — state-dependent to tell the operator what they will do. #}
{% macro row_action(row) %}
  {%- if row.latest_run_id -%}
    {%- if row.latest_run_status == "awaiting_adjudication" -%}
    <a href="/media/{{ row.id }}/editor">Review →</a>
    {%- elif row.latest_run_status == "failed" -%}
    <a href="/media/{{ row.id }}/editor">Retry →</a>
    {%- else -%}
    <a href="/media/{{ row.id }}/editor">Open →</a>
    {%- endif -%}
  {%- endif -%}
{% endmacro %}

{# Card macro for a single media item in cards view. #}
{% macro media_card(row) %}
  <li>
    <input type="checkbox" name="media_id" value="{{ row.id }}" class="media-card-check"
           aria-label="Select {{ friendly_media_label(row.source_title, row.source_path) }}"
           {% if (row.id|string) in selected_ids %}checked{% endif %}>
    <input type="hidden" name="run_baseline" value="{{ row.id }}:{{ row.latest_run_id or 'none' }}">
    <span class="media-card-duration">{{ format_duration(row.duration_seconds) }}</span>
    {% if row.latest_run_id %}
    <a class="media-card-title" href="/media/{{ row.id }}/editor">{{ friendly_media_label(row.source_title, row.source_path) }}</a>
    {% else %}
    <span class="media-card-title">{{ friendly_media_label(row.source_title, row.source_path) }}</span>
    {% endif %}
    <div class="media-card-chips">
      {{ media_status(row) }}
      {{ file_missing_notice(row) }}
    </div>
    <p class="media-card-meta">
      {% if trashed and row.trashed_at %}{{ format_age(row.trashed_at, now=now) }}
      {% else %}{{ format_age(row.added_at, now=now) }}{% endif %}
    </p>
  </li>
{% endmacro %}

{# The settings-folder picker is shared by the upload and URL forms. #}
{% macro folder_picker(select_id) %}
<label for="{{ select_id }}">Settings folder (optional)
  <select id="{{ select_id }}" name="media_folder_id">
    <option value="">No folder — use global settings</option>
    {% for opt in folder_options %}
    <option value="{{ opt.id }}">{{ opt.path }}{% if shell.projects_enabled and opt.project_name %} — {{ opt.project_name }}{% if opt.project_archived %} (archived){% endif %}{% endif %}</option>
    {% endfor %}
  </select>
  <small class="oc-muted">Applies this folder's vocabulary and corrections. The file is not moved.</small>
</label>
{% endmacro %}

{% if trashed %}
<p class="oc-muted" style="margin-bottom:var(--space-3)">
  Trashed files awaiting permanent deletion.
  <a href="{{ trash_toggle_url }}">← Back to active media</a>
</p>
{% elif archived %}
<p class="oc-muted" style="margin-bottom:var(--space-3)">
  Archived runs are hidden from the active library.
  <a href="{{ archived_toggle_url }}">← Back to active media</a>
</p>
{% endif %}

{% if notice %}
<p class="notice {{ notice.kind }}" role="status">{{ notice.text }}</p>
{% endif %}

{% if not archived and not trashed and shell.can_write %}
{% if submitted %}
<p class="notice" role="status">
  {% if submitted == "deferred" %}Queued for transcription. It will start when the worker is available.
  {% else %}Queued for transcription.{% endif %}
</p>
{% endif %}

<div id="upload-panel" class="add-media-panel" data-upload-panel hidden>
  <form method="post" action="/media/submit" enctype="multipart/form-data">
    <input type="hidden" name="submission_id" value="{{ submission_id }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_media_submit }}">
    <label class="dropzone" data-dropzone><span data-dropzone-label>Drop a file here, or choose one</span>
      <input type="file" name="file" required>
    </label>
    {{ folder_picker("submit-folder") }}
    <div id="upload-queue" hidden></div>
    <button type="submit" class="primary" data-upload-submit>Submit for transcription</button>
  </form>
</div>

<div id="server-panel" class="add-media-panel" hidden>
  <section class="folder-panel" aria-labelledby="folders-h">
    <h3 id="folders-h">Registered folders</h3>
    <p class="oc-muted">Registered folders share vocabulary and corrections across their files. Registering or unregistering a folder never moves any file.</p>
    {% if folder_options %}
    <ul class="lib-folders">
      {% for opt in folder_options %}
      <li>
        <span><code>{{ opt.path }}</code>{% if shell.projects_enabled and opt.project_name %} <span class="oc-muted">— {{ opt.project_name }}{% if opt.project_archived %} (archived){% endif %}</span>{% endif %}</span>
        <form method="post" action="/media/folders">
          <input type="hidden" name="csrf_token" value="{{ csrf_media_folders }}">
          <input type="hidden" name="action" value="remove">
          <input type="hidden" name="folder_id" value="{{ opt.id }}">
          <input type="hidden" name="sort" value="{{ sort }}">
          <input type="hidden" name="view" value="{{ view }}">
          {% if search %}<input type="hidden" name="q" value="{{ search }}">{% endif %}
          {% if status %}<input type="hidden" name="filter_status" value="{{ status }}">{% endif %}
          <button type="submit" class="danger">Unregister</button>
        </form>
      </li>
      {% endfor %}
    </ul>
    {% else %}
    <p class="oc-muted">No folders registered yet.</p>
    {% endif %}
    <form method="post" action="/media/folders" class="register-folder">
      <input type="hidden" name="csrf_token" value="{{ csrf_media_folders }}">
      <input type="hidden" name="action" value="add">
      <input type="hidden" name="sort" value="{{ sort }}">
      <input type="hidden" name="view" value="{{ view }}">
      {% if search %}<input type="hidden" name="q" value="{{ search }}">{% endif %}
      {% if status %}<input type="hidden" name="filter_status" value="{{ status }}">{% endif %}
      <label for="register-folder-path">Folder path (under the media root)
        <input id="register-folder-path" type="text" name="folder" placeholder="interviews/2026" required>
      </label>
      <button type="submit">Register folder</button>
    </form>
  </section>
</div>

<div id="fetch-panel" class="add-media-panel" hidden>
  <form method="post" action="/media/fetch">
    <input type="hidden" name="submission_id" value="{{ fetch_submission_id }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_media_fetch }}">
    <label>Media URL
      <input type="url" name="url" placeholder="https://…" required{% if not ytdlp_enabled %} disabled{% endif %}>
    </label>
    {{ folder_picker("fetch-folder") }}
    <button type="submit"{% if not ytdlp_enabled %} disabled{% endif %}>Fetch and transcribe</button>
    {% if ytdlp_enabled %}
    <p class="oc-muted">Fetching a URL lets the downloader contact other sites, including
    ones a link redirects to. If you fetch links you don't fully trust, run the
    restricted URL-download overlay (<code>compose.ytdlp-egress.yaml</code>). See the
    operations guide, &ldquo;URL ingestion &amp; egress security&rdquo;.</p>
    {% else %}
    <p class="oc-muted">Fetching from a URL is turned off. Turn it on in <a href="/settings">Settings</a>.</p>
    {% endif %}
  </form>
</div>
{% endif %}

{% if not archived and not trashed %}
<form class="lib-search" method="get" action="/media">
  <input type="hidden" name="sort" value="{{ sort }}">
  <input type="hidden" name="view" value="{{ view }}">
  <div class="lib-search-row">
    <input type="search" name="q" value="{{ search }}" placeholder="Search by name or folder…" aria-label="Search media">
    <select name="status" aria-label="Filter by status" onchange="this.form.submit()">
      {% for value, label in statuses %}
      <option value="{{ value }}"{% if value == status %} selected{% endif %}>{{ label }}</option>
      {% endfor %}
    </select>
    <button type="submit" class="cb-btn cb-btn-secondary">Search</button>
    {% if is_filtered %}
    <a href="/media?sort={{ sort }}&view={{ view }}" class="lib-search-clear">Clear</a>
    {% endif %}
  </div>
</form>
{% endif %}

{% if rows %}
<form method="post" action="{% if trashed %}/media/restore{% elif archived %}/media/unarchive{% else %}/media/assign{% endif %}" id="bulk-form">
  <input type="hidden" name="sort" value="{{ sort }}">
  <input type="hidden" name="view" value="{{ view }}">
  {% if search %}<input type="hidden" name="q" value="{{ search }}">{% endif %}
  {% if status %}<input type="hidden" name="filter_status" value="{{ status }}">{% endif %}
  {% if open_folder_id is defined and open_folder_id %}
  <input type="hidden" name="open" value="{{ open_folder_id }}">
  {% endif %}

  {% if shell.can_write %}
  <div class="gt-action-bar" data-action-bar hidden>
    <span class="gt-count" data-selected-count>0 selected</span>
    {% if trashed %}
    <button type="submit" formaction="/media/restore" name="csrf_token" value="{{ csrf_media_restore }}" class="cb-btn cb-btn-secondary">Restore selected</button>
    {% elif archived %}
    <button type="submit" formaction="/media/unarchive" name="csrf_token" value="{{ csrf_media_unarchive }}" class="cb-btn cb-btn-secondary">Restore latest archived run</button>
    {% else %}
    <button type="button" class="cb-btn cb-btn-secondary" data-show-panel="assign-panel-inline">Move to folder...</button>
    <button type="submit" formaction="/media/rerun" name="csrf_token" value="{{ csrf_media_rerun }}" class="cb-btn cb-btn-secondary">Re-run</button>
    <button type="submit" formaction="/media/trash" name="csrf_token" value="{{ csrf_media_trash }}" class="cb-btn cb-btn-danger" style="border:0;background:transparent">Move to trash</button>
    {% endif %}
  </div>
  {% endif %}

  {% if not archived and not trashed and shell.can_write %}
  <div id="assign-panel-inline" class="add-media-panel" hidden style="margin-bottom:var(--space-3)">
    <label for="assign-folder">Assign settings folder
      <select id="assign-folder" name="media_folder_id">
        <option value=""{% if not attempted_folder_id %} selected{% endif %}>No folder — use global settings</option>
        {% for opt in folder_options %}
        <option value="{{ opt.id }}"{% if (opt.id|string) == attempted_folder_id %} selected{% endif %}>{{ opt.path }}{% if shell.projects_enabled and opt.project_name %} — {{ opt.project_name }}{% if opt.project_archived %} (archived){% endif %}{% endif %}</option>
        {% endfor %}
      </select>
    </label>
    <button type="submit" name="csrf_token" value="{{ csrf_media_assign }}">Apply to selected</button>
  </div>
  {% endif %}

  <div class="lib-toolbar">
    <nav class="view-toggle" aria-label="Sort by">
      {% for value, label in sorts %}
      <a href="/media?sort={{ value }}&view={{ view }}{% if open_folder_id is defined and open_folder_id %}&open={{ open_folder_id }}{% endif %}{% if trashed %}&trashed=1{% elif archived %}&archived=1{% endif %}{{ filter_qs }}"{% if value == sort %} aria-current="true"{% endif %}>{{ label }}</a>
      {% endfor %}
    </nav>
    <span style="flex:1"></span>
    {% if not trashed and not archived %}
    <a href="{{ archived_toggle_url }}" style="font-size:var(--t-sm);color:var(--accent);text-decoration:none">Archived →</a>
    <a href="{{ trash_toggle_url }}" style="font-size:var(--t-sm);color:var(--accent);text-decoration:none;margin-left:var(--space-3)">Trash →</a>
    {% elif archived %}
    <a href="{{ trash_toggle_url }}" style="font-size:var(--t-sm);color:var(--accent);text-decoration:none">Trash →</a>
    {% endif %}
  </div>

{% if view == "table" %}
  <div class="grid-table media-grid" role="region" aria-label="Media library" tabindex="0"
       style="grid-template-columns: 2.2rem 1fr auto auto auto auto auto;">
    <div class="gt-header">
      <span><input type="checkbox" data-select-all-box aria-label="Select all"></span>
      <span>NAME</span>
      <span>{% if not paginated %}ITEMS{% endif %}</span>
      <span>LENGTH</span>
      <span>REVIEW</span>
      <span>{% if trashed %}TRASHED{% endif %}</span>
      <span></span>
    </div>
    <div id="media-results" style="display:contents">
    {% include "media/_results.html" %}
    </div>
  </div>

{% else %}
  {# --- Cards view ---------------------------------------------------- #}
  {% if active_folder is defined and active_folder %}
  {# Drill-down: showing a single folder's items as a list. #}
  <a class="cards-back" href="/media?sort={{ sort }}&view=cards{% if trashed %}&trashed=1{% elif archived %}&archived=1{% endif %}{{ filter_qs }}">
    <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M11 2L5 8l6 6" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
    All folders
  </a>
  <h2 class="cards-drilldown-header">
    <svg width="20" height="20" viewBox="0 0 16 16" fill="var(--ink-2)" aria-hidden="true"><path d="M1.5 2A1.5 1.5 0 000 3.5v9A1.5 1.5 0 001.5 14h13a1.5 1.5 0 001.5-1.5V5a1.5 1.5 0 00-1.5-1.5H7.71L6.85 2.64A1.5 1.5 0 005.57 2H1.5z"/></svg>
    {{ active_folder.folder_path }}
    <span class="oc-muted" style="font-size:var(--t-sm);font-weight:400">
      {{ active_folder.item_count }} recording{{ "s" if active_folder.item_count != 1 }}
      · {{ format_compact_duration(active_folder.total_duration_seconds) }}
    </span>
  </h2>

  <div class="lib-toolbar" style="margin-bottom:0">
    <label style="font-size:var(--t-sm);color:var(--ink-2)">
      <input type="checkbox" data-select-all-box aria-label="Select all"> Select all
    </label>
  </div>

  <div class="grid-table media-grid" role="region" aria-label="Folder contents" tabindex="0"
       style="grid-template-columns: 2.2rem 1fr auto auto auto;">
    <div class="gt-header">
      <span></span>
      <span>NAME</span>
      <span>LENGTH</span>
      <span>REVIEW</span>
      <span></span>
    </div>
    <div id="media-results" style="display:contents">
    {% include "media/_results.html" %}
    </div>
  </div>

  {% else %}
  {# Top-level cards: folders/ungrouped #}
  <div id="media-results">
  {% include "media/_results.html" %}
  </div>
  {% endif %}
{% endif %}

</form>
{% else %}
{% if trashed %}
<p class="oc-muted">Trash is empty.</p>
{% elif archived %}
<p class="oc-muted">No archived runs. Archive a run from the <a href="{{ archived_toggle_url }}">active library</a> to see it here.</p>
{% elif is_filtered %}
<p class="oc-muted">No recordings match{% if search %} "{{ search }}"{% endif %}{% if status %} with that filter{% endif %}. <a href="/media?sort={{ sort }}&view={{ view }}">Clear search</a></p>
{% else %}
<p class="oc-muted">No media yet.{% if shell.can_write %} Add a recording with the button above, or register a folder on the server.{% endif %}</p>
{% endif %}
{% if not trashed and not archived %}
{# The toolbar above only renders with rows; keep Trash reachable after the last file is trashed. #}
<p style="font-size:var(--t-sm)">
  <a href="{{ archived_toggle_url }}" style="color:var(--accent);text-decoration:none">Archived →</a>
  <a href="{{ trash_toggle_url }}" style="color:var(--accent);text-decoration:none;margin-left:var(--space-3)">Trash →</a>
</p>
{% endif %}
{% endif %}

{% if trashed and rows and shell.can_write %}
<form method="post" action="/media/empty-trash" style="margin-top:var(--space-4)"
      onsubmit="return confirm('Permanently delete every file in the trash? This removes them from disk and cannot be undone.')">
  <input type="hidden" name="csrf_token" value="{{ csrf_media_empty_trash }}">
  <p class="oc-muted">Emptying the trash permanently deletes the files from disk. This cannot be undone.</p>
  <button type="submit" class="danger">Empty trash permanently</button>
</form>
{% endif %}

<script>
(function () {
  for (var dd of document.querySelectorAll('[data-dropdown]')) {
    var btn = dd.querySelector('[data-dropdown-toggle]');
    var menu = dd.querySelector('[data-dropdown-menu]');
    if (!btn || !menu) continue;
    btn.addEventListener('click', function () {
      var open = menu.hidden;
      menu.hidden = !open;
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
    });
    document.addEventListener('click', function (e) {
      if (!dd.contains(e.target)) { menu.hidden = true; btn.setAttribute('aria-expanded', 'false'); }
    });
  }

  for (var choice of document.querySelectorAll('[data-show-panel]') ) {
    choice.addEventListener('click', function () {
      var id = this.getAttribute('data-show-panel');
      var panel = document.getElementById(id);
      if (!panel) return;
      var wasHidden = panel.hidden;
      for (var p of document.querySelectorAll('.add-media-panel')) { p.hidden = true; }
      panel.hidden = !wasHidden;
      var ddMenu = document.querySelector('[data-dropdown-menu]');
      if (ddMenu) ddMenu.hidden = true;
      var ddBtn = document.querySelector('[data-dropdown-toggle]');
      if (ddBtn) ddBtn.setAttribute('aria-expanded', 'false');
    });
  }

  function toggleFolder(folderId) {
    var btn = document.querySelector('button.folder-toggle[data-expand="' + folderId + '"]');
    if (!btn) return;
    var expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', expanded ? 'false' : 'true');
    btn.textContent = expanded ? '▸' : '▾';
    var children = document.querySelectorAll('[data-parent="' + folderId + '"]');
    for (var c of children) { c.hidden = expanded; }
  }
  document.addEventListener('dragover', function (e) { e.preventDefault(); });
  document.addEventListener('drop', function (e) { e.preventDefault(); });
  document.querySelectorAll('[data-dropzone]').forEach(function (zone) {
    var input = zone.querySelector('input[type=file]');
    if (!input) return;
    zone.addEventListener('dragover', function (e) {
      e.preventDefault();
      if (!input.disabled) zone.classList.add('is-drag');
    });
    zone.addEventListener('dragleave', function () { zone.classList.remove('is-drag'); });
    zone.addEventListener('drop', function (e) {
      e.preventDefault(); zone.classList.remove('is-drag');
      if (!input.disabled && e.dataTransfer && e.dataTransfer.files.length) {
        input.files = e.dataTransfer.files;
        input.dispatchEvent(new Event('change', { bubbles: true }));
      }
    });
  });

  var uploadPanel = document.querySelector('[data-upload-panel]');
  if (uploadPanel) (function () {
    var uploadForm = uploadPanel.querySelector('form');
    var fileInput = uploadForm.querySelector('input[type=file]');
    var folderInput = uploadForm.querySelector('[name=media_folder_id]');
    var submitButton = uploadForm.querySelector('[data-upload-submit]');
    var container = uploadPanel.querySelector('#upload-queue');
    var queue = [];
    var uploading = false;
    var stopping = false;
    var renderScheduled = false;

    function uuidv4() {
      if (window.crypto.randomUUID) return window.crypto.randomUUID();
      var bytes = window.crypto.getRandomValues(new Uint8Array(16));
      bytes[6] = (bytes[6] & 15) | 64;
      bytes[8] = (bytes[8] & 63) | 128;
      var hex = Array.from(bytes, function (b) { return b.toString(16).padStart(2, '0'); }).join('');
      return hex.slice(0, 8) + '-' + hex.slice(8, 12) + '-' + hex.slice(12, 16) + '-' +
        hex.slice(16, 20) + '-' + hex.slice(20);
    }

    function formatSize(bytes) {
      var units = ['bytes', 'KB', 'MB', 'GB'];
      var unit = 0;
      while (bytes >= 1024 && unit < units.length - 1) { bytes /= 1024; unit++; }
      return bytes.toFixed(1) + ' ' + units[unit];
    }

    fileInput.multiple = true;
    fileInput.required = false;
    uploadForm.querySelector('[data-dropzone-label]').textContent = 'Drop files here, or choose them';
    var list = document.createElement('ul');
    list.className = 'upload-queue';
    container.appendChild(list);
    var summary = document.createElement('p');
    summary.className = 'upload-summary';
    summary.setAttribute('role', 'status');
    container.appendChild(summary);
    var stopButton = document.createElement('button');
    stopButton.type = 'button';
    stopButton.textContent = 'Stop after current file';
    stopButton.hidden = true;
    uploadForm.appendChild(stopButton);
    stopButton.addEventListener('click', function () {
      stopping = true;
      stopButton.disabled = true;
      summary.textContent = 'Stopping after the current file…';
    });

    function renderQueue() {
      container.hidden = queue.length === 0;
      queue.forEach(function (entry) {
        if (!entry.row) {
          entry.row = document.createElement('li');
          var name = document.createElement('span');
          name.className = 'upload-name';
          name.textContent = entry.file.name;
          var size = document.createElement('span');
          size.className = 'upload-size';
          size.textContent = formatSize(entry.file.size);
          entry.progress = document.createElement('progress');
          entry.progress.max = 100;
          entry.progress.setAttribute('aria-label', 'Upload progress for ' + entry.file.name);
          entry.message = document.createElement('span');
          entry.message.className = 'upload-status';
          entry.button = document.createElement('button');
          entry.button.type = 'button';
          entry.button.className = 'upload-action';
          entry.button.addEventListener('click', function () {
            if (uploading) return;
            if (entry.status === 'failed') {
              entry.status = 'pending';
              entry.percent = 0;
              startBatch([entry]);
            } else if (entry.status === 'pending') {
              queue.splice(queue.indexOf(entry), 1);
              entry.row.remove();
              summary.textContent = '';
              renderQueue();
            }
          });
          [name, size, entry.progress, entry.message, entry.button].forEach(function (el) {
            entry.row.appendChild(el);
          });
          list.appendChild(entry.row);
        }
        var state = entry.status === 'queued' ? 'done' : entry.status;
        if (state === 'finalizing') state = 'uploading';
        entry.row.className = 'upload-row is-' + state;
        entry.progress.value = entry.percent || 0;
        entry.message.textContent = entry.status === 'uploading' ? 'Uploading (' + (entry.percent || 0) + '%)' :
          entry.status === 'finalizing' ? 'Finalizing…' : entry.status === 'queued' ? 'Queued' :
          entry.status === 'failed' ? entry.error : 'Pending';
        entry.button.hidden = entry.status !== 'pending' && entry.status !== 'failed';
        entry.button.disabled = uploading;
        entry.button.textContent = entry.status === 'failed' ? 'Retry' : 'Remove';
        entry.button.setAttribute('aria-label', entry.button.textContent + ' ' + entry.file.name);
      });
      var pending = queue.filter(function (entry) { return entry.status === 'pending'; }).length;
      submitButton.textContent = pending ? 'Upload ' + pending + ' file' + (pending === 1 ? '' : 's') :
        'Submit for transcription';
      submitButton.disabled = uploading || pending === 0;
    }

    function scheduleRender() {
      if (renderScheduled) return;
      renderScheduled = true;
      window.setTimeout(function () { renderScheduled = false; renderQueue(); }, 100);
    }

    fileInput.addEventListener('change', function () {
      if (uploading) return;
      Array.from(fileInput.files).forEach(function (file) {
        queue.push({ file: file, id: uuidv4(), status: 'pending', percent: 0 });
      });
      fileInput.value = '';
      summary.textContent = '';
      renderQueue();
    });

    function beforeUnload(e) { e.preventDefault(); e.returnValue = ''; }

    function startBatch(batch) {
      if (uploading || !batch.length) return;
      var csrfToken = uploadForm.querySelector('[name=csrf_token]').value;
      var folderId = folderInput.value;
      var index = 0;
      var queued = 0;
      var failed = 0;
      var forbidden = false;
      uploading = true;
      stopping = false;
      fileInput.disabled = true;
      folderInput.disabled = true;
      stopButton.hidden = false;
      stopButton.disabled = false;
      summary.textContent = '';
      window.addEventListener('beforeunload', beforeUnload);
      renderQueue();

      function finish() {
        uploading = false;
        fileInput.disabled = false;
        folderInput.disabled = false;
        stopButton.hidden = true;
        var hasPending = queue.some(function (e) { return e.status === 'pending' || e.status === 'failed'; });
        if (!hasPending) window.removeEventListener('beforeunload', beforeUnload);
        summary.textContent = queued + ' of ' + batch.length + ' queued for transcription' +
          (failed ? ' (' + failed + ' failed)' : '') +
          (forbidden ? '. Uploads stopped: authorization failed. Reload before retrying.' :
            stopping ? '. Stopped; remaining files are pending.' : '');
        if (queued > 0) summary.textContent += ' Reload the page to see them in the library.';
        renderQueue();
      }

      function next() {
        if (stopping || index === batch.length) { finish(); return; }
        var entry = batch[index++];
        entry.status = 'uploading';
        entry.percent = 0;
        renderQueue();
        var xhr = new XMLHttpRequest();
        var data = new FormData();
        data.append('file', entry.file);
        data.append('submission_id', entry.id);
        data.append('csrf_token', csrfToken);
        data.append('media_folder_id', folderId);
        xhr.open('POST', uploadForm.action);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.timeout = 5 * 60 * 1000;
        xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            entry.percent = Math.min(100, Math.floor(e.loaded / e.total * 100));
            if (e.loaded >= e.total) entry.status = 'finalizing';
            scheduleRender();
          }
        };
        xhr.upload.onload = function () {
          entry.percent = 100;
          entry.status = 'finalizing';
          scheduleRender();
        };
        xhr.onload = function () {
          var ok = false;
          try {
            var body = JSON.parse(xhr.responseText);
            ok = body && body.ok === true;
          } catch (err) { /* non-JSON response */ }
          if (xhr.status >= 200 && xhr.status < 300 && ok) {
            entry.status = 'queued';
            entry.percent = 100;
            queued++;
          } else if (xhr.status >= 200 && xhr.status < 300) {
            entry.status = 'failed';
            entry.error = 'Unexpected server response (not JSON)';
            failed++;
          } else {
            entry.status = 'failed';
            entry.error = 'Upload failed (HTTP ' + xhr.status + ')';
            try {
              var response = JSON.parse(xhr.responseText);
              if (response.detail) entry.error = typeof response.detail === 'string' ?
                response.detail : JSON.stringify(response.detail);
            } catch (err) { /* Non-JSON errors retain the HTTP status. */ }
            failed++;
            if (xhr.status === 401 || xhr.status === 403) { forbidden = true; stopping = true; }
          }
          renderQueue();
          next();
        };
        xhr.onerror = function () {
          entry.status = 'failed';
          entry.error = 'Upload failed (network error)';
          failed++;
          renderQueue();
          next();
        };
        xhr.ontimeout = function () {
          entry.status = 'failed';
          entry.error = 'Upload timed out';
          failed++;
          renderQueue();
          next();
        };
        xhr.send(data);
      }
      next();
    }

    uploadForm.addEventListener('submit', function (e) {
      e.preventDefault();
      startBatch(queue.filter(function (entry) { return entry.status === 'pending'; }));
    });
    renderQueue();
  })();

  var form = document.getElementById('bulk-form');
  if (!form) return;
  var boxes, actionBar, countEl, selectAllBox;

  function refresh() {
    var n = boxes.filter(function (b) { return b.checked; }).length;
    if (actionBar) { actionBar.hidden = n === 0; }
    if (countEl) { countEl.textContent = n + ' selected'; }
    if (selectAllBox) {
      selectAllBox.checked = n > 0 && n === boxes.length;
      selectAllBox.indeterminate = n > 0 && n < boxes.length;
    }
    for (var b of boxes) {
      var row = b.closest('.gt-row') || b.closest('.lib-cards > li');
      if (row) { row.classList.toggle('is-selected', b.checked); }
    }
    for (var fc of document.querySelectorAll('[data-folder-check]')) {
      var fid = fc.getAttribute('data-folder-check');
      var children = Array.from(form.querySelectorAll('[data-child-of="' + fid + '"]'));
      if (!children.length) continue;
      var checkedCount = children.filter(function (c) { return c.checked; }).length;
      fc.checked = checkedCount === children.length;
      fc.indeterminate = checkedCount > 0 && checkedCount < children.length;
    }
  }

  function bindSelection() {
    boxes = Array.from(form.querySelectorAll('input[name=media_id]'));
    actionBar = form.querySelector('[data-action-bar]');
    countEl = form.querySelector('[data-selected-count]');
    selectAllBox = form.querySelector('[data-select-all-box]');
    for (var b of boxes) { b.addEventListener('change', refresh); }
    if (selectAllBox && !selectAllBox.dataset.selBound) {
      selectAllBox.dataset.selBound = '1';
      selectAllBox.addEventListener('change', function () {
        for (var b of boxes) { b.checked = selectAllBox.checked; }
        refresh();
      });
    }
    for (var fc of document.querySelectorAll('[data-folder-check]')) {
      fc.addEventListener('change', function () {
        var fid = this.getAttribute('data-folder-check');
        var checked = this.checked;
        var children = form.querySelectorAll('[data-child-of="' + fid + '"]');
        for (var c of children) { c.checked = checked; }
        refresh();
      });
    }
    for (var toggle of document.querySelectorAll('button.folder-toggle[data-expand]')) {
      toggle.addEventListener('click', function () { toggleFolder(this.getAttribute('data-expand')); });
    }
    for (var openLink of document.querySelectorAll('a.folder-open[data-expand]')) {
      openLink.addEventListener('click', function (e) {
        e.preventDefault();
        toggleFolder(this.getAttribute('data-expand'));
      });
    }
    refresh();
  }

  bindSelection();

  document.addEventListener('htmx:afterSwap', function (e) {
    if (e.detail.target && e.detail.target.id === 'media-results') {
      bindSelection();
    }
  });
})();
</script>
{% endblock %}