{# Download history page body.
   Split out of history.html so the Monitoring section can embed the same
   markup. Everything below the toolbar is rendered by static/history.js;
   charts come from static/mf-charts.js (MFCharts), the same module the
   Statistics page uses. #}
<div class="hist-page-container">
  <div class="page-header hist-header">
    <div>
      <h1 class="page-title">{{ _('Download History') }}</h1>
      <p class="page-subtitle">{{ _('Every downloaded episode with start and end time') }}</p>
    </div>
    <div class="hist-header-actions">
      <button class="btn btn-secondary" id="histExportBtn" title="{{ _('Export') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
          <polyline points="7 10 12 15 17 10" />
          <line x1="12" y1="15" x2="12" y2="3" />
        </svg>
        {{ _('Export') }}
      </button>
      <button class="btn btn-secondary" id="histClearBtn">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round">
          <polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14H6L5 6" />
          <path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4h6v2" />
        </svg>
        {{ _('Clear history') }}
      </button>
    </div>
  </div>

  {# Breakdown charts (by status/provider/language) for the *filtered* set,
     filled by loadSummary(). The KPI card row that used to sit here (Entries,
     Success rate, Data volume, Avg. speed, Total time) was removed. #}
  <div id="histSummary" class="hist-summary"></div>

  <div class="hist-toolbar">
    <div class="hist-search-wrap">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" class="hist-search-icon">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      <input type="search" id="histSearch" class="hist-search" placeholder="{{ _('Search by title...') }}"
        autocomplete="off" />
    </div>
    <div class="hist-filter-tabs" role="tablist">
      <button class="hist-filter-tab active" data-status="all" role="tab">{{ _('All') }}</button>
      <button class="hist-filter-tab" data-status="completed" role="tab">{{ _('Done') }}</button>
      <button class="hist-filter-tab" data-status="failed" role="tab">{{ _('Failed') }}</button>
      <button class="hist-filter-tab" data-status="cancelled" role="tab">{{ _('Cancelled') }}</button>
      <button class="hist-filter-tab" data-status="skipped" role="tab">{{ _('Skipped') }}</button>
    </div>
    <div class="hist-filter-group">
      <select id="histSource" class="hist-filter-select" aria-label="{{ _('Source') }}">
        <option value="all">{{ _('All sources') }}</option>
        <option value="manual">{{ _('Manual') }}</option>
        <option value="autosync">AutoSync</option>
        <option value="seerr">Seerr</option>
      </select>
      {# Options are filled from /api/history/facets, so only values that
         actually occur are offered. #}
      <select id="histProvider" class="hist-filter-select" aria-label="{{ _('Provider') }}">
        <option value="all">{{ _('All providers') }}</option>
      </select>
      <select id="histLanguage" class="hist-filter-select" aria-label="{{ _('Language') }}">
        <option value="all">{{ _('All languages') }}</option>
      </select>
      <select id="histRange" class="hist-filter-select" aria-label="{{ _('Time range') }}">
        <option value="all">{{ _('All time') }}</option>
        <option value="1d">{{ _('Last 24 hours') }}</option>
        <option value="7d">{{ _('Last 7 days') }}</option>
        <option value="30d">{{ _('Last 30 days') }}</option>
      </select>
      <select id="histPerPage" class="hist-filter-select" aria-label="{{ _('Results per page') }}">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
      <button type="button" class="hist-reset-btn" id="histResetBtn" style="display:none">
        {{ _('Reset filters') }}
      </button>
    </div>
  </div>

  <div class="hist-bulk-bar" id="histBulkBar" style="display:none">
    <span id="histBulkCount"></span>
    <div style="flex:1"></div>
    <button class="btn btn-danger btn-sm" id="histBulkDeleteBtn">{{ _('Delete selected') }}</button>
    <button class="btn btn-secondary btn-sm" id="histBulkClearBtn">{{ _('Clear selection') }}</button>
  </div>

  <div class="hist-loading" id="histLoading">
    <span class="hist-spinner"></span>
    <span>{{ _('Loading history...') }}</span>
  </div>

  <div class="hist-empty-state" id="histEmpty" style="display:none">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
      stroke-linejoin="round">
      <path d="M3 3v5h5" /><path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" />
      <polyline points="12 7 12 12 15 15" />
    </svg>
    <p id="histEmptyText">{{ _('No downloads recorded yet.') }}</p>
  </div>

  <div class="hist-table-wrap" id="histTableWrap" style="display:none">
    <div class="hist-table-header">
      <label class="hist-selectall">
        <input type="checkbox" class="chb-main" id="histSelectAll" aria-label="{{ _('Select all') }}" />
        <span class="hist-count" id="histCount"></span>
      </label>
    </div>
    <table class="hist-table">
      <thead>
        <tr>
          <th class="hist-col-cb"></th>
          {# data-sort marks a sortable column; history.js wires the click. #}
          <th data-sort="title" class="hist-sortable">{{ _('Title') }}</th>
          <th class="hist-col-ep">{{ _('Episode') }}</th>
          <th data-sort="date" class="hist-sortable hist-col-time">{{ _('Finished') }}</th>
          <th data-sort="duration" class="hist-sortable hist-col-dur">{{ _('Duration') }}</th>
          <th data-sort="size" class="hist-sortable hist-col-size">{{ _('Size') }}</th>
          <th data-sort="speed" class="hist-sortable hist-col-size">{{ _('Speed') }}</th>
          <th data-sort="status" class="hist-sortable hist-col-status">{{ _('Status') }}</th>
        </tr>
      </thead>
      <tbody id="histTableBody"></tbody>
    </table>
    <div id="histPagination"></div>
  </div>
</div>

{# ===== Detail modal — same shell as the Statistics modals ===== #}
<div class="modal-overlay stats-modal-overlay" id="histDetailModal" style="display:none"
  onclick="if(event.target===this)histCloseDetail()" role="dialog" aria-modal="true"
  aria-labelledby="histDetailTitle">
  <div class="card stats-modal-card loaded">
    <div class="card-header stats-modal-header">
      <div class="stats-modal-heading">
        <span class="stats-modal-icon" id="histDetailIcon" style="--icon-color:#22c55e">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
            <polyline points="7 10 12 15 17 10" />
            <line x1="12" y1="15" x2="12" y2="3" />
          </svg>
        </span>
        <div>
          <h2 class="card-title" id="histDetailTitle">{{ _('Download details') }}</h2>
          <p class="stats-modal-sub" id="histDetailSub"></p>
        </div>
      </div>
      <button class="modal-close" onclick="histCloseDetail()" aria-label="{{ _('Close') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"
          stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
        </svg>
      </button>
    </div>
    <div id="histDetailBody" class="stats-modal-body"></div>
    <div class="hist-detail-actions">
      <button class="btn btn-secondary btn-sm" id="histRetryBtn" style="display:none">{{ _('Retry') }}</button>
      <button class="btn btn-danger btn-sm" id="histDeleteBtn">{{ _('Delete') }}</button>
    </div>
  </div>
</div>