<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <meta property="og:title" content="Gottesdienste Speyer und Schwegenheim" />
  <meta property="og:description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft." />
  <meta property="og:image" content="https://app.bethaus-speyer.de/static/icons/logo-200x200.png" />
  <meta property="og:url" content="https://app.bethaus-speyer.de" />

  <title>{{ title_short }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="description" content="... uns aber, die wir gerettet werden, ist es eine Gotteskraft.">
  <meta name="author" content="Bethaus Speyer">
  <link rel="icon" href="/static/icons/logo-192x192.png" type="image/png" sizes="192x192">

  
  <!-- Web App Manifest -->
  <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
  
  <!-- Android Theme Color -->
  <meta name="theme-color" content="#34495e">
  
  <!-- Apple-specific tags -->
  <link rel="touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-status-bar-style" content="default">
  <meta name="mobile-web-app-title" content="Gottesdienste">

  <!-- Your CSS -->
  <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='gallery.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='audioplayer.css') }}">
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
  <header class="site-header">
    <a href="#">
      <img src="/static/logoW.png" alt="Logo" class="logo">
    </a>
    <h1>{{ title_long }}</h1>
  </header>
  <div class="wrapper">
    <div class="container">
      <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>
    </div>
    
    <!-- Global Audio Player in Footer -->
    <footer>
      <div class="audio-player-container" id="audioPlayerContainer">
        <div class="audio-player">
          <audio id="globalAudio" prefetch="auto">
            Your browser does not support the audio element.
          </audio>
          <div class="controls">
            <button class="player-button">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#34495e">
                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM7 8a1 1 0 012 0v4a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v4a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
              </svg>
            </button>
            <div class="slider">
              <input type="range" class="timeline" max="100" value="0" step="0.1">
              <div id="timeInfo" class="now-playing-info"></div>
            </div>
            <button class="sound-button" onclick="downloadAudio()">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 122.88 120.89" fill="#34495e" width="35" height="35">
                <path fill-rule="evenodd" d="M84.58,47a7.71,7.71,0,1,1,10.8,11L66.09,86.88a7.72,7.72,0,0,1-10.82,0L26.4,58.37a7.71,7.71,0,1,1,10.81-11L53.1,63.12l.16-55.47a7.72,7.72,0,0,1,15.43.13l-.15,55L84.58,47ZM0,113.48.1,83.3a7.72,7.72,0,1,1,15.43.14l-.07,22q46,.09,91.91,0l.07-22.12a7.72,7.72,0,1,1,15.44.14l-.1,30h-.09a7.71,7.71,0,0,1-7.64,7.36q-53.73.1-107.38,0A7.7,7.7,0,0,1,0,113.48Z"/>
                </svg>
            </button>
          </div>
        </div>
        <div id="nowPlayingInfo" class="now-playing-info">
          keine Datei ausgewählt...
        </div>
      </div>
    </footer>
  </div>
  
  <!-- 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;">
    <button id="gallery-close">x</button>
    <img id="gallery-modal-content" src="" />
    <button class="gallery-nav gallery-prev">‹</button>
    <button class="gallery-nav gallery-next">›</button>
  </div>
  
  <div id="loader-container" style="display: none;">
    <div id="gallery-loader"></div>
  </div>

  <!-- Load main app JS first, then gallery JS -->
  <script src="{{ url_for('static', filename='app.js') }}"></script>
  <script src="{{ url_for('static', filename='gallery.js') }}"></script>
  <script src="{{ url_for('static', filename='audioplayer.js') }}"></script>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}')
          .then(reg => console.log('Service worker registered.', reg))
          .catch(err => console.error('Service worker not registered.', err));
      });
    }
    </script>
</body>
</html>
