<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7ff">
  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#101826">
  <meta name="color-scheme" content="light dark">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="{{ app_name }}">
  <meta name="description" content="Putzliga macht Haushaltsaufgaben leichter, motivierender und fair verteilt.">
  <title>{% block title %}{{ app_name }}{% endblock %}</title>
  <link rel="manifest" href="{{ url_for('main.manifest') }}">
  <link rel="icon" type="image/png" sizes="128x128" href="{{ url_for('static', filename='images/favicon.png') }}">
  <link rel="shortcut icon" href="{{ url_for('static', filename='images/favicon.png') }}">
  <link rel="apple-touch-icon" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css', v=asset_version('css/style.css')) }}">
</head>
<body
  data-push-key="{{ config['VAPID_PUBLIC_KEY'] if current_user.is_authenticated else '' }}"
  data-current-user-id="{{ current_user.id if current_user.is_authenticated else '' }}"
  data-current-user-name="{{ current_user.name if current_user.is_authenticated else '' }}"
  data-celebrate-points="{{ request.args.get('celebrate_points', '') }}"
>
  {% from "partials/macros.html" import nav_icon %}
  <div class="app-shell {% if not current_user.is_authenticated %}app-shell--auth{% endif %}">
    {% if current_user.is_authenticated %}
      <aside class="sidebar">
        <a class="brand" href="{{ url_for('tasks.my_tasks') }}">
          <span class="brand__mark">
            <img src="{{ url_for('static', filename='images/logo-mark.png') }}" alt="Putzliga Logo" class="brand__logo">
          </span>
          <div>
            <strong>Putzliga</strong>
            <span>Haushalt mit Punktestand</span>
          </div>
        </a>

        <nav class="sidebar-nav" aria-label="Hauptnavigation">
          {% for endpoint, label, icon in nav_items %}
            <a href="{{ url_for(endpoint) }}" class="nav-link {% if request.endpoint == endpoint %}is-active{% endif %}">
              {{ nav_icon(icon) }}
              <span>{{ label }}</span>
            </a>
          {% endfor %}
        </nav>

        <section class="sidebar-card">
          <div class="sidebar-card__row">
            <img class="avatar avatar--lg" src="{% if current_user.avatar_path and current_user.avatar_path.startswith('avatars/') %}{{ url_for('main.uploads', filename=current_user.avatar_path) }}{% else %}{{ url_for('static', filename=current_user.display_avatar) }}{% endif %}" alt="Avatar von {{ current_user.name }}">
            <div>
              <strong>{{ current_user.name }}</strong>
              <p>{{ current_user.email }}</p>
            </div>
          </div>
          <a class="text-link" href="{{ url_for('auth.logout') }}">Abmelden</a>
        </section>
      </aside>
    {% endif %}

    <div class="page-shell">
      <header class="topbar">
        {% if current_user.is_authenticated %}
          <div>
            <p class="eyebrow">Spielerisch sauber bleiben</p>
            <h1>{% block page_title %}{{ app_name }}{% endblock %}</h1>
          </div>
          <a class="topbar-user" href="{{ url_for('settings.index') }}">
            <span>{{ current_user.name }}</span>
            <img class="avatar" src="{% if current_user.avatar_path and current_user.avatar_path.startswith('avatars/') %}{{ url_for('main.uploads', filename=current_user.avatar_path) }}{% else %}{{ url_for('static', filename=current_user.display_avatar) }}{% endif %}" alt="">
          </a>
        {% else %}
          <a class="brand brand--public" href="{{ url_for('auth.login') }}">
            <span class="brand__mark">
              <img src="{{ url_for('static', filename='images/logo-mark.png') }}" alt="Putzliga Logo" class="brand__logo">
            </span>
            <div>
              <strong>Putzliga</strong>
              <span>Haushaltsaufgaben mit Liga-Gefühl</span>
            </div>
          </a>
        {% endif %}
      </header>

      <main class="content">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            <div class="flash-stack">
              {% for category, message in messages %}
                <div class="flash flash--{{ category }}">{{ message }}</div>
              {% endfor %}
            </div>
          {% endif %}
        {% endwith %}

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

      <footer class="app-footer">
        <div class="app-footer__left">
          <a href="https://git.hnz.io/hnzio/putzliga/releases" target="_blank" rel="noreferrer">Version {{ app_version }}</a>
          <span>·</span>
          <span>Made with ❤️ in Göttingen.</span>
        </div>
        <div class="app-footer__right">
          <a href="https://hnz.io" target="_blank" rel="noreferrer">© 2026 @ hnz.io</a>
        </div>
      </footer>
    </div>
  </div>

  {% if current_user.is_authenticated %}
    <div class="celebration-layer" id="celebrationLayer" hidden aria-hidden="true"></div>

    <nav class="bottom-nav" aria-label="Mobile Navigation">
      {% for endpoint, label, icon in mobile_nav_items %}
        <a href="{{ url_for(endpoint) }}" class="bottom-nav__item {% if request.endpoint == endpoint %}is-active{% endif %}">
          {{ nav_icon(icon) }}
          <span>{{ label }}</span>
        </a>
      {% endfor %}
    </nav>

    <button type="button" class="fab-quick-task" id="quickTaskOpen" aria-label="Quick-Wins öffnen">
      {{ nav_icon('plus') }}
    </button>

    <dialog class="complete-dialog" id="completeDialog">
      <form method="dialog" class="complete-dialog__surface">
        <p class="eyebrow">Punkte fair verbuchen</p>
        <h2>Wer hat diese Aufgabe erledigt?</h2>
        <p id="completeDialogText">Bitte wähle aus, wem die Punkte gutgeschrieben werden sollen.</p>
        <div class="choice-grid" id="completeDialogChoices"></div>
        <button type="button" class="button button--ghost" id="completeDialogClose">Abbrechen</button>
      </form>
    </dialog>

    <dialog class="complete-dialog" id="quickTaskDialog">
      <form method="post" action="{{ url_for('tasks.quick_create') }}" class="complete-dialog__surface complete-dialog__surface--task" id="quickWinsForm">
        {{ quick_task_form.hidden_tag() }}
        <div class="quick-win-dialog-header">
          <span class="quick-win-dialog-header__badge" aria-hidden="true">{{ icon_svg('quick-wins-sparkles')|safe }}</span>
          <div>
            <p class="eyebrow">Quick-Wins</p>
            <h2>Schnell Punkte abstauben</h2>
            <p class="muted">Alle Quick-Wins sind für das ganze Team sichtbar. Für „Sonstiges“ kannst du Titel und Aufwand frei wählen.</p>
          </div>
        </div>
        <div class="quick-win-tag-grid">
          {% for quick_win in quick_wins %}
            <label class="quick-win-tag" data-quick-win-tag>
              <input type="checkbox" name="quick_win_ids" value="{{ quick_win.id }}" data-quick-win-input>
              <span>{{ quick_win.title }}</span>
            </label>
          {% endfor %}
          <label class="quick-win-tag quick-win-tag--custom" data-quick-win-tag>
            <input type="checkbox" name="include_custom" value="1" data-quick-win-custom-toggle>
            <span>Sonstiges</span>
          </label>
        </div>
        <div class="quick-win-custom-fields" id="quickWinCustomFields" hidden>
          <div class="field">
            {{ quick_task_form.title.label }}
            {{ quick_task_form.title(placeholder="Zum Beispiel: Flur kurz aufräumen", required=False) }}
          </div>
          <div class="field">
            {{ quick_task_form.effort.label }}
            {{ quick_task_form.effort(required=False) }}
          </div>
        </div>
        <div class="dialog-actions dialog-actions--stack">
          <button type="submit" class="button button--wide" id="quickWinsSubmit" disabled>Quick-Win sichern</button>
          <button type="button" class="button button--ghost button--wide" id="quickTaskClose">Abbrechen</button>
        </div>
      </form>
    </dialog>

    <form method="post" class="sr-only" id="completeDialogForm">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <input type="hidden" name="completed_for" value="me" id="completeDialogChoice">
    </form>
  {% endif %}

  <script src="{{ url_for('static', filename='js/app.js', v=asset_version('js/app.js')) }}" defer></script>
</body>
</html>
