<!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') }}" />
</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">
      <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 %}
      <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>
      <div class="toolbar-session-actions">
        <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>

  <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>
</body>
</html>
