{% 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 %}
{%- 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_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 %}
<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 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 }}">
          {% 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 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 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 %}

  <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 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>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 %}
        {# Folder-level chip: counts RECORDINGS, not voices, so it stays
           noun-less and outside needs_review_chip (which owns the voice copy). #}
        <span class="chip chip-warn">{{ group.needs_review_count }} need{{ "s" if group.needs_review_count == 1 else "" }} review</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) }}
        {{ file_missing_notice(row) }}
      </span>
      <span class="num">—</span>
      <span class="num">{{ format_duration(row.duration_seconds) }}</span>
      <span>{{ media_status(row) }}</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">{{ row_action(row) }}</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) }}
        {{ file_missing_notice(row) }}
      </span>
      <span class="num">—</span>
      <span class="num">{{ format_duration(row.duration_seconds) }}</span>
      <span>{{ media_status(row) }}</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">{{ row_action(row) }}</span>
    </div>
    {% endfor %}
  </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>
    {% for row in active_folder.items %}
    <div class="gt-row">
      <span>
        <input type="checkbox" name="media_id" value="{{ row.id }}"
               data-child-of="{{ active_folder.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>
        {{ friendly_media_label(row.source_title, row.source_path) }}
        {{ file_missing_notice(row) }}
      </span>
      <span class="num">{{ format_duration(row.duration_seconds) }}</span>
      <span>{{ media_status(row) }}</span>
      <span class="gt-action">{{ row_action(row) }}</span>
    </div>
    {% else %}
    <div class="gt-row"><span></span><span class="oc-muted" style="grid-column:span 4">No recordings in this folder.</span></div>
    {% endfor %}
  </div>

  {% else %}
  {# Top-level cards: folders as cards, ungrouped files below. #}
  {% if folder_groups %}
  <ul class="lib-cards">
    {% for group in folder_groups %}
    <li class="folder-tile">
      <a class="media-folder-card" href="/media?sort={{ sort }}&view=cards&open={{ group.folder_id }}{% if trashed %}&trashed=1{% elif archived %}&archived=1{% endif %}{{ filter_qs }}">
        <div class="mfc-icon">
          <svg width="24" height="24" 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 class="mfc-name">{{ group.folder_path }}</span>
        </div>
        <p class="mfc-stats">
          {{ group.item_count }} recording{{ "s" if group.item_count != 1 }}
          · {{ format_compact_duration(group.total_duration_seconds) }}
        </p>
        <div class="mfc-chips">
          {% if not archived and not trashed %}{{ chip("watched") }}{% endif %}
          {% 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{{ "s" if group.needs_review_count == 1 else "" }} review</span>
          {% elif group.completed_count == group.item_count and group.item_count > 0 %}
          {{ chip("all reviewed") }}
          {% else %}
          <span class="chip chip-neutral">—</span>
          {% endif %}
        </div>
      </a>
    </li>
    {% endfor %}
  </ul>
  {% endif %}

  {% if ungrouped_items %}
  {% if folder_groups %}
  <h2 class="cards-section-label">Unfiled</h2>
  {% endif %}
  <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>
  <ul class="lib-cards">
    {% for row in ungrouped_items %}
    {{ media_card(row) }}
    {% endfor %}
  </ul>
  {% endif %}
  {% endif %}
{% 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>
{% 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. 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;
      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;
    }
  }
  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 %}