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

{% block cb_breadcrumb %}media /{% endblock %}
{% block cb_summary %}
{%- if media_summary.folder_count %}{{ media_summary.folder_count }} folder{{ "s" if media_summary.folder_count != 1 else "" }} · {% endif -%}
{{ media_summary.file_count }} recording{{ "s" if media_summary.file_count != 1 else "" }} · {{ media_summary.total_hours }}
{%- endblock %}
{% block cb_search %}
<div class="cb-search" aria-hidden="true">
  <span>Filter media</span>
  <kbd>/</kbd>
</div>
{% endblock %}
{% block cb_actions %}
<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 %}"{% if value == view %} aria-current="true"{% endif %}>{{ value|capitalize }}</a>
  {% endfor %}
</nav>
{% if not archived and not trashed %}
<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 %}
{# 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 opt.project_name %} — {{ opt.project_name }}{% 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 %}
{% 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" 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>Drop a file here, or choose one
      <input type="file" name="file" required>
    </label>
    {{ folder_picker("submit-folder") }}
    <button type="submit" class="primary">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 opt.project_name %} <span class="oc-muted">— {{ opt.project_name }}</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 }}">
          <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 }}">
      <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 not ytdlp_enabled %}
    <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 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 }}">

  <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">Delete...</button>
    {% endif %}
  </div>

  {% if not archived and not trashed %}
  <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 opt.project_name %} — {{ opt.project_name }}{% 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 trashed %}&trashed=1{% elif archived %}&archived=1{% endif %}"{% 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>ITEMS</span>
      <span>LENGTH</span>
      <span>REVIEW</span>
      <span>{% if trashed %}TRASHED{% endif %}</span>
      <span></span>
    </div>

    {% for group in folder_groups %}
    <div class="gt-row gt-folder-row" data-folder="{{ group.folder_id }}" role="row">
      <span>
        <input type="checkbox" class="folder-check" data-folder-check="{{ group.folder_id }}"
               aria-label="Select all in {{ group.folder_path }}">
      </span>
      <span class="gt-folder-name">
        <button type="button" class="folder-toggle" data-expand="{{ group.folder_id }}"
                aria-expanded="false" aria-label="Expand {{ group.folder_path }}">▸</button>
        <svg width="16" height="16" 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>
        <span>{{ group.folder_path }}</span>
        {% if not archived and not trashed %}{{ chip("watched") }}{% endif %}
      </span>
      <span class="num">{{ group.item_count }}</span>
      <span class="num">{{ format_compact_duration(group.total_duration_seconds) }}</span>
      <span>
        {% if group.failed_count %}
        <span class="chip chip-danger">{{ group.failed_count }} failed</span>
        {% elif group.running_count %}
        {{ chip("transcribing") }}
        {% elif group.needs_review_count %}
        <span class="chip chip-warn">{{ group.needs_review_count }} need you</span>
        {% elif group.completed_count == group.item_count and group.item_count > 0 %}
        {{ chip("all reviewed") }}
        {% else %}
        <span class="chip chip-neutral">—</span>
        {% endif %}
      </span>
      <span class="num">{% if group.latest_date %}{{ format_age(group.latest_date, now=now) }}{% endif %}</span>
      <span class="gt-action"><a href="#" data-expand="{{ group.folder_id }}" class="folder-open">Open →</a></span>
    </div>
    {% for row in group.items %}
    <div class="gt-row gt-child-row" data-parent="{{ group.folder_id }}" hidden>
      <span>
        <input type="checkbox" name="media_id" value="{{ row.id }}"
               data-child-of="{{ group.folder_id }}"
               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>
      <span class="gt-child-indent">
        {{ friendly_media_label(row.source_title, row.source_path) }}
        {% if row.id in missing_file_ids %}<span class="chip chip-danger" title="The file at {{ row.current_path or row.source_path }} was not found on disk">File missing</span>{% endif %}
      </span>
      <span class="num">—</span>
      <span class="num">{{ format_duration(row.duration_seconds) }}</span>
      <span>
        {% if row.latest_run_id %}
        {{ chip(humanize_status(row.latest_run_status)) }}
        {% else %}<span class="oc-muted">—</span>{% endif %}
      </span>
      <span class="num">
        {% if trashed and row.trashed_at %}{{ format_age(row.trashed_at, now=now) }}
        {% else %}{{ format_age(row.added_at, now=now) }}{% endif %}
      </span>
      <span class="gt-action">
        {% if row.latest_run_id %}
        <a href="/runs/{{ row.latest_run_id }}">View →</a>
        {% endif %}
      </span>
    </div>
    {% endfor %}
    {% endfor %}

    {% for row in ungrouped_items %}
    <div class="gt-row">
      <span>
        <input type="checkbox" name="media_id" value="{{ row.id }}"
               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>
      <span>
        {{ friendly_media_label(row.source_title, row.source_path) }}
        {% if row.id in missing_file_ids %}<span class="chip chip-danger" title="The file at {{ row.current_path or row.source_path }} was not found on disk">File missing</span>{% endif %}
      </span>
      <span class="num">—</span>
      <span class="num">{{ format_duration(row.duration_seconds) }}</span>
      <span>
        {% if row.latest_run_id %}
        {{ chip(humanize_status(row.latest_run_status)) }}
        {% else %}<span class="oc-muted">—</span>{% endif %}
      </span>
      <span class="num">
        {% if trashed and row.trashed_at %}{{ format_age(row.trashed_at, now=now) }}
        {% else %}{{ format_age(row.added_at, now=now) }}{% endif %}
      </span>
      <span class="gt-action">
        {% if row.latest_run_id %}
        <a href="/runs/{{ row.latest_run_id }}">View →</a>
        {% endif %}
      </span>
    </div>
    {% endfor %}
  </div>

{% else %}
<div class="lib-cards-placeholder">
  <p class="oc-muted">Cards view is coming soon. Switch to Table view above.</p>
</div>
{% endif %}

</form>

{% if truncated %}
<p class="oc-muted">Showing up to the first {{ limit }} files. Register fewer or smaller folders to narrow the list.</p>
{% endif %}
{% 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>
{% else %}
<p class="oc-muted">No media yet. Add a recording with the button above, or register a folder on the server.</p>
{% endif %}
{% endif %}

{% if trashed and rows %}
<form method="post" action="/media/empty-trash" style="margin-top:var(--space-4)">
  <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; }
  }
  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'));
    });
  }

  for (var zone of document.querySelectorAll('[data-dropzone]')) {
    var input = zone.querySelector('input[type=file]');
    if (!input) continue;
    zone.addEventListener('dragover', function (e) { e.preventDefault(); 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 (e.dataTransfer && e.dataTransfer.files.length) { input.files = e.dataTransfer.files; }
    });
  }

  var form = document.getElementById('bulk-form');
  if (!form) return;
  var boxes = Array.from(form.querySelectorAll('input[name=media_id]'));
  var actionBar = form.querySelector('[data-action-bar]');
  var countEl = form.querySelector('[data-selected-count]');
  var selectAllBox = form.querySelector('[data-select-all-box]');

  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; }
  }
  for (var b of boxes) { b.addEventListener('change', refresh); }
  if (selectAllBox) {
    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();
    });
  }

  refresh();
})();
</script>
{% endblock %}