{% extends 'base.html' %}

{% block title %}{{ title_short }}{% endblock %}
{% block page_id %}app{% endblock %}

{% block head_extra %}
  <meta property="og:title" content="{{ og_title }}" data-page-head>
  <meta property="og:description" content="{{ og_description }}" data-page-head>
  <meta property="og:image" content="/icon/logo-192x192.png" data-page-head>
  <meta property="og:type" content="website" data-page-head>
  <meta name="description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft." data-page-head>
  <meta name="author" content="{{ title_short }}" data-page-head>
  <link rel="icon" href="/icon/logo-192x192.png" type="image/png" sizes="192x192" data-page-head>
  <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}" data-page-head>
  <link rel="touch-icon" href="/icon/logo-192x192.png" data-page-head>
  <meta name="mobile-web-app-capable" content="yes" data-page-head>
  <meta name="mobile-web-app-status-bar-style" content="default" data-page-head>
  <meta name="mobile-web-app-title" content="Gottesdienste" data-page-head>
  <link rel="stylesheet" href="{{ url_for('static', filename='gallery.css') }}" data-page-head>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" data-page-head></script>
{% endblock %}

{% block content %}
  <div class="container">
    <div id="livestream-alert" class="alert alert-warning livestream-alert d-none" role="status" aria-live="polite">
      <span>Zurzeit findet ein Livestream statt.</span>
      <a class="alert-link livestream-button" id="livestream-link" href="{{ livestream_url }}" target="_blank" rel="noopener">Zum Livestream wechseln</a>
    </div>
  </div>

  <!-- Tab Navigation -->
  {% if features %}
    <nav class="main-tabs">
      <div class="main-tabs-scroll">
        {% if "files"    in features %}<button class="tab-button active" data-tab="browse">Audio/Photo</button>{% endif %}
        {% if "messages" in features %}<button class="tab-button" data-tab="messages">Nachrichten</button>{% endif %}
        {% if "calendar" in features %}<button class="tab-button" data-tab="calendar">Kalender</button>{% endif %}
      </div>
    </nav>
  {% endif %}

  <!-- Browse Section -->
  <main id="browse-section" class="tab-content active">
    <div id="breadcrumbs" class="breadcrumb"></div>
    <div id="content"></div>
    <div id="directory-controls">
      <button id="reload-button" onclick="reloadDirectory()" title="Reload Directory">
        <svg width="70px" height="70px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M16.2721 3.13079L17.4462 6.15342C17.6461 6.66824 17.3909 7.24768 16.8761 7.44764L13.8535 8.6217" stroke="#CCC" stroke-width="2.5" stroke-linecap="round" />
          <path d="M7.61555 20.5111L6.93391 17.3409C6.81782 16.801 7.16142 16.2692 7.70136 16.1531L10.8715 15.4714" stroke="#CCC" stroke-width="2.5" stroke-linecap="round" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M16.9153 7.86755C17.6501 7.5052 17.8749 6.55584 17.263 6.01119C16.4869 5.32046 15.5626 4.77045 14.5169 4.41551C10.3331 2.99538 5.79017 5.23581 4.37005 9.41964C4.01511 10.4653 3.88883 11.5335 3.96442 12.5696C4.02402 13.3867 4.9141 13.7862 5.64883 13.4239V13.4239C6.17327 13.1652 6.44536 12.5884 6.44406 12.0037C6.44274 11.4136 6.53712 10.8132 6.73739 10.2232C7.71372 7.34681 10.837 5.80651 13.7134 6.78285C14.3034 6.98311 14.8371 7.27371 15.3045 7.63397C15.7677 7.99095 16.3909 8.12619 16.9153 7.86755V7.86755ZM6.97575 16.1145C7.50019 15.8558 8.12343 15.991 8.58656 16.348C9.05394 16.7083 9.58773 16.9989 10.1777 17.1992C13.0541 18.1755 16.1774 16.6352 17.1537 13.7588C17.354 13.1688 17.4483 12.5684 17.447 11.9783C17.4457 11.3936 17.7178 10.8168 18.2423 10.5581V10.5581C18.977 10.1958 19.8671 10.5953 19.9267 11.4124C20.0022 12.4485 19.876 13.5167 19.521 14.5624C18.1009 18.7462 13.558 20.9866 9.37418 19.5665C8.32849 19.2116 7.4042 18.6615 6.62812 17.9708C6.01616 17.4262 6.24102 16.4768 6.97575 16.1145V16.1145Z" fill="#CCC" />
        </svg>
      </button>
    </div>
  </main>

  {% include 'messages_section.html' %}
  {% include 'calendar_section.html' %}

  <search style="display: none;">
    <button type="button" id="backBtn" class="btn-close search-close-btn" aria-label="beenden"></button>
    <div class="container">
      <form id="searchForm" method="post" class="mb-4">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
        <!-- Suchwörter -->
        <div class="mb-3 search-query-wrap">
          <label for="query" class="h5 form-label">Suchwörter:</label>
          <div class="input-group">
            <input type="text" id="query" name="query" class="form-control" required>
            <button type="button" id="clearBtn" class="btn btn-outline-secondary input-clear-btn" aria-label="zurücksetzen">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <!-- Transkript durchsuchen -->
          <div class="form-check mb-3">
            <input type="checkbox" class="form-check-input" id="includeTranscript" name="includeTranscript">
            <label class="form-check-label" for="includeTranscript">Im Volltext suchen</label>
          </div>
        </div>

        <!-- Toggle für Suchoptionen -->
        <div class="d-flex align-items-center mb-2">
          <h2 class="h5 mb-0">Suchoptionen</h2>
          <button class="btn btn-sm btn-link p-0" 
                  type="button" 
                  data-bs-toggle="collapse" 
                  data-bs-target="#searchOptions" 
                  aria-expanded="false" 
                  aria-controls="searchOptions"
                  aria-label="Toggle Suchoptionen">
            <i class="bi bi-plus-lg"></i>
          </button>
        </div>

        <!-- Suchoptionen einklappbar -->
        <div id="searchOptions" class="collapse border rounded p-3 mb-3">

          <!-- In Ordner suchen -->
          <div class="mb-3">
            <label for="folder" class="form-label">In Ordner suchen:</label>
            <select id="folder" name="folder" class="form-select">
              <option value="">Alle</option>
              {% for folder in search_folders %}
                <option value="{{ folder }}">{{ folder }}</option>
              {% endfor %}
            </select>
          </div>

          <hr>

          <!-- Kategorie -->
          <div class="mb-3">
            <label class="form-label">Kategorie:</label>
            <div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="none" value="" checked>
                <label class="form-check-label" for="none">Alles</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="lied" value="Lied">
                <label class="form-check-label" for="lied">Lied</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="gedicht" value="Gedicht">
                <label class="form-check-label" for="gedicht">Gedicht</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="predigt" value="Predigt">
                <label class="form-check-label" for="predigt">Predigt</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="chor" value="chor">
                <label class="form-check-label" for="chor">Chor</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="category" id="orchester" value="orchester">
                <label class="form-check-label" for="orchester">Orchester</label>
              </div>
            </div>
          </div>

          <hr>

          <!-- Dateityp -->
          <div class="mb-3">
            <label class="form-label">Dateityp:</label>
            <div class="d-flex flex-wrap gap-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="filetype" id="filetype-audio" value="audio" checked>
                <label class="form-check-label" for="filetype-audio">Audio</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="filetype" id="filetype-video" value="video">
                <label class="form-check-label" for="filetype-video">Video</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="filetype" id="filetype-image" value="image">
                <label class="form-check-label" for="filetype-image">Bild</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="filetype" id="filetype-liedtext" value="liedtext">
                <label class="form-check-label" for="filetype-liedtext">Liedtext</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" name="filetype" id="filetype-other" value="other">
                <label class="form-check-label" for="filetype-other">Sonstige</label>
              </div>
            </div>
            <small class="text-muted">Mehrfachauswahl möglich!</small>
          </div>

          <hr>

          <!-- Zeitraum -->
          <div class="row g-2 mb-3">
            <div class="col-12 col-md-6">
              <label for="datefrom" class="form-label">Datum von:</label>
              <input type="date" id="datefrom" name="datefrom" class="form-control">
            </div>
            <div class="col-12 col-md-6">
              <label for="dateto" class="form-label">Datum bis:</label>
              <input type="date" id="dateto" name="dateto" class="form-control">
            </div>
          </div>
        </div>

        <!-- Buttons -->
        <div class="mb-3">
          <button type="submit" class="btn btn-primary">Suchen</button>
        </div>
      </form>

      <!-- AJAX-loaded results -->
      <div id="results"></div>
    </div>
  </search>

  <!-- Transcript Modal -->
  <div id="transcriptModal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <div id="transcriptContent"></div>
    </div>
  </div>

  <!-- Gallery Modal for Images -->
  <div id="gallery-modal" style="display: none;" role="dialog" aria-modal="true" aria-hidden="true">
    <div id="gallery-stage">
      <img id="gallery-modal-content" src="" alt="">
    </div>

    <div class="gallery-top-bar">
      <div class="gallery-actions-left">
        <button id="gallery-info" class="gallery-control" type="button" aria-expanded="false" aria-controls="gallery-exif">i</button>
        <button id="gallery-download" class="gallery-control" type="button" aria-label="Download original image" title="Download original image">↓</button>
      </div>
      <div class="gallery-actions-right">
        <button id="gallery-play" class="gallery-control" type="button" aria-pressed="false" aria-label="Start slideshow">▶</button>
        <button id="gallery-close" class="gallery-control" type="button" aria-label="Close gallery">×</button>
      </div>
    </div>

    <button class="gallery-nav gallery-prev" type="button" aria-label="Previous image">‹</button>
    <button class="gallery-nav gallery-next" type="button" aria-label="Next image">›</button>
    <div id="gallery-exif" aria-live="polite"></div>

    <div class="gallery-meta-bar">
      <div id="gallery-filename" aria-live="polite"><span class="filename-text"></span></div>
      <div id="gallery-position" aria-live="polite"></div>
    </div>
  </div>

  <div id="loader-container" style="display: none;">
    <div id="gallery-loader"></div>
  </div>

  <div id="fullscreen-loader" style="display: none;">
    <div class="loader"></div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}');
      });
    }
  </script>
{% endblock %}