<!doctype html>
<html lang="{{ lang }}">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ t('brand') }}</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="{{ url_for('static', filename='styles.css', v='20260724v') }}" />
</head>
<body>
  <header class="topbar">
    <div>
      <a class="brand" href="{{ url_for('welcome') if guest_name else url_for('landing') }}">{{ t('brand') }}</a>
    </div>
    <div class="toolbar {{ 'toolbar-authenticated' if guest_name else 'toolbar-login' }}">
      <div class="toolbar-row toolbar-row-top">
        <form method="post" action="{{ url_for('set_lang', code='de') }}">
          <button class="btn btn-ghost" type="submit">DE</button>
        </form>
        <form method="post" action="{{ url_for('set_lang', code='en') }}">
          <button class="btn btn-ghost" type="submit">EN</button>
        </form>
        {% if guest_name %}
        <button
          class="btn btn-ghost toolbar-nav-btn toolbar-translate-btn"
          type="button"
          aria-label="{{ t('translator') }}"
          title="{{ t('translator') }}"
          data-translator-open
        >
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M12 5.5A8.4 8.4 0 0 0 6.5 3.4 8.6 8.6 0 0 0 2 4.7v14.1a.75.75 0 0 0 1.02.7A8.1 8.1 0 0 1 6.5 18.6a7.1 7.1 0 0 1 4.98 2 .75.75 0 0 0 1.04 0 7.1 7.1 0 0 1 4.98-2 8.1 8.1 0 0 1 3.48.9.75.75 0 0 0 1.02-.7V4.7a8.6 8.6 0 0 0-4.5-1.3A8.4 8.4 0 0 0 12 5.5zm-1 12.9a8.7 8.7 0 0 0-4.5-1.3 9.6 9.6 0 0 0-3 .5V5.7a7.4 7.4 0 0 1 3-.8A6.9 6.9 0 0 1 11 6.7zm9.5-.8a9.6 9.6 0 0 0-3-.5 8.7 8.7 0 0 0-4.5 1.3V6.7a6.9 6.9 0 0 1 4.5-1.8 7.4 7.4 0 0 1 3 .8z" />
          </svg>
        </button>
        <a class="btn btn-ghost toolbar-nav-btn toolbar-faq-btn" href="{{ url_for('faq') }}" aria-label="{{ t('faq') }}" title="{{ t('faq') }}">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M12 2a10 10 0 1 0 10 10A10.01 10.01 0 0 0 12 2zm.15 16.25a1.25 1.25 0 1 1 1.25-1.25 1.25 1.25 0 0 1-1.25 1.25zm1.75-7.05-.75.48a1.36 1.36 0 0 0-.65 1.17v.4h-2v-.4a3.34 3.34 0 0 1 1.58-2.85l.75-.48a1.75 1.75 0 1 0-2.68-1.48h-2a3.75 3.75 0 1 1 5.75 3.16z" />
          </svg>
        </a>
        {% endif %}
      </div>
      {% if guest_name %}
      <div class="toolbar-row toolbar-row-bottom">
        <div
          class="toolbar-timer"
          data-countdown-target="{{ wedding_countdown_iso }}"
          data-countdown-started="{{ t('countdown_started') }}"
        >
          <button
            class="btn btn-ghost toolbar-nav-btn toolbar-timer-btn"
            type="button"
            aria-label="{{ t('countdown_button_label') }}"
            title="{{ t('countdown_button_label') }}"
            data-countdown-toggle
            aria-expanded="false"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M15 2H9v2h6V2zm-3 4a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm3.4 11.4L11 13V8h2v4.2l3.8 3.8z" />
            </svg>
          </button>
          <div class="toolbar-timer-popover" data-countdown-popover hidden>
            <p class="toolbar-timer-label">{{ t('countdown_until') }}</p>
            <div class="toolbar-timer-grid" data-countdown-grid>
              <div class="toolbar-timer-unit">
                <span class="toolbar-timer-value" data-countdown-days>0</span>
                <span class="toolbar-timer-unit-label">{{ t('countdown_days') }}</span>
              </div>
              <div class="toolbar-timer-unit">
                <span class="toolbar-timer-value" data-countdown-hours>00</span>
                <span class="toolbar-timer-unit-label">{{ t('countdown_hours') }}</span>
              </div>
              <div class="toolbar-timer-unit">
                <span class="toolbar-timer-value" data-countdown-minutes>00</span>
                <span class="toolbar-timer-unit-label">{{ t('countdown_minutes') }}</span>
              </div>
              <div class="toolbar-timer-unit">
                <span class="toolbar-timer-value" data-countdown-seconds>00</span>
                <span class="toolbar-timer-unit-label">{{ t('countdown_seconds') }}</span>
              </div>
            </div>
            <p class="toolbar-timer-subline" data-countdown-subline>{{ t('countdown_subline') }}</p>
          </div>
        </div>
        <a class="btn btn-ghost toolbar-nav-btn" href="{{ url_for('guest_area') }}" aria-label="{{ t('dashboard') }}" title="{{ t('dashboard') }}">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M3 3h8v8H3V3zm10 0h8v5h-8V3zM3 13h5v8H3v-8zm7 0h11v8H10v-8z" />
          </svg>
        </a>
        <form method="post" action="{{ url_for('logout') }}">
          <button class="btn btn-ghost" type="submit">{{ t('logout') }}</button>
        </form>
      </div>
      {% endif %}
    </div>
  </header>

  {% if guest_name %}
  <dialog
    class="translator-dialog"
    data-translator-dialog
    data-source-lang="{{ 'de' if lang == 'de' else 'en' }}"
    aria-labelledby="translator-title"
  >
    <div class="translator-sheet">
      <div class="translator-head">
        <div>
          <h2 id="translator-title">{{ t('translator') }}</h2>
        </div>
      </div>

      <div class="translator-direction" aria-label="{{ t('translator_direction') }}">
        <span data-translator-source>{{ t('language_german') if lang == 'de' else t('language_english') }}</span>
        <button class="translator-swap" type="button" data-translator-swap aria-label="{{ t('translator_swap') }}">⇄</button>
        <span data-translator-target>{{ t('language_english') if lang == 'de' else t('language_german') }}</span>
      </div>

      <label class="translator-label" for="translator-text">{{ t('translator_input_label') }}</label>
      <textarea
        id="translator-text"
        class="translator-input"
        rows="4"
        maxlength="500"
        placeholder="{{ t('translator_placeholder') }}"
        data-translator-input
      ></textarea>

      <div class="translator-quick-list" aria-label="{{ t('translator_quick_phrases') }}">
        <button type="button" data-translator-phrase data-de="Schön, dich kennenzulernen." data-en="Nice to meet you.">{{ t('translator_phrase_meet') }}</button>
        <button type="button" data-translator-phrase data-de="Möchtest du etwas trinken?" data-en="Would you like something to drink?">{{ t('translator_phrase_drink') }}</button>
        <button type="button" data-translator-phrase data-de="Wo ist die Toilette?" data-en="Where is the restroom?">{{ t('translator_phrase_restroom') }}</button>
      </div>

      <p class="translator-privacy">{{ t('translator_privacy') }}</p>
      <button class="btn translator-submit" type="button" data-translator-submit disabled>
        {{ t('translator_submit') }} <span aria-hidden="true">↗</span>
      </button>
    </div>
  </dialog>
  {% endif %}

  <main class="container">

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
          <p class="flash">{{ message }}</p>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}
  </main>

  <footer class="site-footer">
    <a href="{{ url_for('datenschutz') }}">{{ t('privacy') }}</a>
    <a href="{{ url_for('impressum') }}">{{ t('imprint') }}</a>
  </footer>
  <script src="{{ url_for('static', filename='dashboard-transition.js', v='20260303a') }}" defer></script>
  <script src="{{ url_for('static', filename='countdown.js', v='20260303c') }}" defer></script>
  <script src="{{ url_for('static', filename='translator.js', v='20260724b') }}" defer></script>
</body>
</html>
