{% extends "base.html" %}
{% from "partials/macros.html" import avatar, nav_icon %}
{% block title %}Optionen · Putzliga{% endblock %}
{% block page_title %}Optionen{% endblock %}
{% block content %}
  <section class="two-column">
    <article class="panel">
      <p class="eyebrow">Profil & Benachrichtigungen</p>
      <h2>Persönliche Einstellungen</h2>
      <form method="post" enctype="multipart/form-data" class="form-grid">
        {{ form.hidden_tag() }}
        <div class="field">
          {{ form.name.label }}
          {{ form.name() }}
          {% for error in form.name.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.email.label }}
          {{ form.email() }}
          {% for error in form.email.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.password.label }}
          {{ form.password(placeholder="Leer lassen, wenn nichts geändert werden soll") }}
          {% for error in form.password.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <div class="field">
          {{ form.avatar.label }}
          {{ form.avatar() }}
          {% for error in form.avatar.errors %}<small class="error">{{ error }}</small>{% endfor %}
        </div>
        <label class="checkbox">
          {{ form.notification_task_due_enabled() }}
          <span>Push für heute oder morgen fällige Aufgaben</span>
        </label>
        <label class="checkbox">
          {{ form.notification_monthly_winner_enabled() }}
          <span>Push zum Monatssieger am 1. um 09:00 Uhr</span>
        </label>
        {{ form.submit(class_='button') }}
      </form>
    </article>

    <article class="panel">
      <p class="eyebrow">Push & App-Install</p>
      <h2>Web-Push vorbereiten</h2>
      <p class="muted">Putzliga nutzt echten Web-Push mit Service Worker und gespeicherten Subscriptions. Auf iPhone funktioniert das nur, wenn die App zum Home-Bildschirm hinzugefügt wurde.</p>
      <div class="push-box">
        <div class="push-box__state {% if push_ready %}is-ready{% else %}is-disabled{% endif %}">
          {{ nav_icon('bell') }}
          <div>
            <strong>{% if push_ready %}VAPID konfiguriert{% else %}VAPID fehlt{% endif %}</strong>
            <p>{% if push_ready %}Push kann im Browser aktiviert werden.{% else %}Bitte zuerst Public/Private Key in der Umgebung setzen.{% endif %}</p>
          </div>
        </div>
        <button
          type="button"
          class="button button--wide"
          id="pushToggle"
          {% if not push_ready %}disabled{% endif %}
          data-subscribed="{{ '1' if has_subscription else '0' }}"
        >
          {% if has_subscription %}Push deaktivieren{% else %}Push aktivieren{% endif %}
        </button>
        <p class="inline-note" id="pushHint">
          Auf iPhone/iPad bitte zuerst in Safari zum Home-Bildschirm hinzufügen und als Web-App öffnen.
        </p>
      </div>
    </article>
  </section>

  <section class="panel">
    <p class="eyebrow">Gamification</p>
    <h2>Badge-Regeln pflegen</h2>
    <div class="badge-settings">
      {% for badge in badges %}
        <form method="post" action="{{ url_for('settings.update_badge', badge_id=badge.id) }}" class="badge-setting-card">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <div>
            <strong>{{ badge.name }}</strong>
            <p class="muted">{{ badge.description }}</p>
          </div>
          <div class="field field--compact">
            <label>Schwelle</label>
            <input type="number" name="threshold" min="1" value="{{ badge.threshold }}">
          </div>
          <div class="field field--compact">
            <label>Bonus</label>
            <input type="number" name="bonus_points" min="0" value="{{ badge.bonus_points }}">
          </div>
          <label class="checkbox checkbox--compact">
            <input type="checkbox" name="active" {% if badge.active %}checked{% endif %}>
            <span>Aktiv</span>
          </label>
          <button type="submit" class="button button--secondary">Badge speichern</button>
        </form>
      {% endfor %}
    </div>
  </section>
{% endblock %}