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

{% block content %}
<div class="cal-page-container">
  <div class="page-header cal-header">
    <div>
      <h1 class="page-title">{{ _('Calendar') }}</h1>
      <p class="page-subtitle">{{ _('Upcoming episode air dates for your AutoSync jobs') }}</p>
      <p class="page-subtitle page-hint">{{ _('Please be aware that the calendar displays the airtime based on the country of origin. The time zone cannot currently be converted.') }}</p>
      <div class="cal-status-row">
        <!-- Scan-Badge -->
        <span class="cal-scan-badge" id="calScanBadge">
          <span class="cal-scan-spinner"></span>{{ _('Scanning…') }}
        </span>
        <!-- Watcher -->
        <span class="cal-watcher-status" id="calWatcherTip" title="">
          <span class="cal-watcher-dot" id="calWatcherDot"></span>
          <span class="cal-watcher-label" id="calWatcherLabel">{{ _('Watcher…') }}</span>
        </span>
      </div>
    </div>
  </div>

  <!-- Toolbar -->
  <div class="cal-toolbar">
    <!-- Navigation -->
    <div class="cal-nav">
      <button class="btn btn-secondary cal-nav-btn" id="calPrevBtn" 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>
      <button class="btn btn-secondary cal-today-btn" id="calTodayBtn">{{ _('Today') }}</button>
      <button class="btn btn-secondary cal-nav-btn" id="calNextBtn" 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>
      <span class="cal-period-label" id="calPeriodLabel"></span>
    </div>

    <div class="cal-toolbar-spacer"></div>

    <!-- View range: month / week -->
    <div class="cal-segmented" id="calRangeToggle" role="tablist">
      <button class="cal-seg-btn active" data-range="month" role="tab">{{ _('Month') }}</button>
      <button class="cal-seg-btn" data-range="week" role="tab">{{ _('Week') }}</button>
    </div>

    <!-- Layout: grid (tiles) / list -->
    <div class="cal-segmented" id="calLayoutToggle" role="tablist">
      <button class="cal-seg-btn active" data-layout="grid" role="tab" title="{{ _('Grid view') }}" aria-label="{{ _('Grid view') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect>
          <rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
      </button>
      <button class="cal-seg-btn" data-layout="list" role="tab" title="{{ _('List view') }}" aria-label="{{ _('List view') }}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
          stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line>
          <line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line>
          <line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
      </button>
    </div>
  </div>

  <!-- Source filter chips (populated by calendar.js when multiple sources exist) -->
  <div class="cal-filters" id="calFilters"></div>

  <!-- Loading -->
  <div class="cal-loading" id="calLoading">
    <span class="cal-spinner"></span>
    <span>{{ _('Loading calendar...') }}</span>
  </div>

  <!-- No API key -->
  <div class="cal-empty-state" id="calNoKey" 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="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
    </svg>
    <p>{{ _('A TMDB API key is required. Configure it under') }} <a href="/integrations#cineinfo" class="integ-link">CineInfo</a>.</p>
  </div>

  <!-- No events -->
  <div class="cal-empty-state" id="calEmpty" style="display:none">
    <!-- Default: nothing scheduled -->
    <div id="calEmptyDefault">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line>
        <line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line>
      </svg>
      <p>{{ _('No upcoming episode dates found for your AutoSync jobs.') }}</p>
      <p class="cal-empty-hint" id="calEmptySeerrHint" style="display:none">{{ _('Seerr is active, but none of your open requests have an upcoming air or release date yet — so there is nothing to show here.') }}</p>
    </div>
    <!-- Initial sync in progress -->
    <div id="calEmptySyncing" style="display:none">
      <span class="cal-spinner"></span>
      <p>{{ _('The first synchronization may take a while — your calendar is being filled in the background.') }}</p>
    </div>
  </div>

  <!-- Calendar render targets -->
  <div class="cal-view" id="calView" style="display:none"></div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='calendar.js') }}"></script>
{% endblock %}