{% extends "base.html" %}
{% block title %}{{ _('Download History') }} — MediaForge{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='history.css') }}">
{% endblock %}

{% block content %}
<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 hist-clear-btn" id="histExportBtn" title="{{ _('Export') }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px"><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 hist-clear-btn" id="histClearBtn">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
        stroke-linejoin="round" style="width:15px;height:15px">
        <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>

  <!-- Toolbar -->
  <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="text" id="histSearch" class="hist-search" style="padding-left: 32px !important;" 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>
    <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>
    <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>
    <div class="hist-perpage">
      <label class="hist-perpage-label" for="histPerPage">{{ _('Results per page') }}</label>
      <select id="histPerPage" class="hist-perpage-select">
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="50">50</option>
        <option value="100">100</option>
      </select>
    </div>
  </div>

  <!-- Bulk selection bar -->
  <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>

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

  <!-- Empty -->
  <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>{{ _('No downloads recorded yet.') }}</p>
  </div>

  <!-- Table -->
  <div class="hist-table-wrap" id="histTableWrap" style="display:none">
    <div class="hist-table-header">
      <span class="hist-count" id="histCount"></span>
      <div class="hist-pagination" id="histPagination" style="display:none">
        <button class="btn btn-secondary hist-page-btn" id="histPrevBtn" title="{{ _('Back') }}" aria-label="{{ _('Back') }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
        </button>
        <span class="hist-page-indicator" id="histPageIndicator">{{ _('Page') }} 1</span>
        <button class="btn btn-secondary hist-page-btn" id="histNextBtn" title="{{ _('Next') }}" aria-label="{{ _('Next') }}">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
        </button>
      </div>
    </div>
    <table class="hist-table">
      <thead>
        <tr>
          <th class="hist-col-cb"><input type="checkbox" id="histSelectAll" aria-label="{{ _('Select all') }}" /></th>
          <th>{{ _('Title') }}</th>
          <th class="hist-col-ep">{{ _('Episode') }}</th>
          <th class="hist-col-time">{{ _('Start') }}</th>
          <th class="hist-col-time">{{ _('End') }}</th>
          <th class="hist-col-dur">{{ _('Duration') }}</th>
          <th class="hist-col-size">{{ _('Size') }}</th>
          <th class="hist-col-status">{{ _('Status') }}</th>
        </tr>
      </thead>
      <tbody id="histTableBody"></tbody>
    </table>
  </div>
</div>

<!-- ===== Detail Modal ===== -->
<div class="modal-overlay" id="histDetailModal" style="display:none" onclick="if(event.target===this)histCloseDetail()">
  <div class="hist-detail-modal">
    <div class="modal-header">
      <h2 class="modal-title" id="histDetailTitle">{{ _('Download details') }}</h2>
      <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="hist-detail-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>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='history.js') }}"></script>
{% endblock %}