{% extends "base.html" %}
{% from "ui/button.html" import button %}
{% from "ui/form_field.html" import input_field %}
{% block title %}Registrierung{% endblock %}
{% block body_class %}register-theme{% endblock %}
{% block page_class %}register-page{% endblock %}
{% block content %}
  <section class="register-shell">
    <h1 class="register-title">Registrierung</h1>

    <form action="/register" method="post" enctype="multipart/form-data" class="register-form">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

      <section class="register-section register-section-auth">
        {{ input_field('E-Mail', 'email', type='email', required=true, autocomplete='username') }}
        {{ input_field('Passwort (mindestens 10 Zeichen)', 'password', type='password', required=true, autocomplete='new-password', attrs='minlength="10"') }}
        <p class="muted register-email-note">Nach dem Anlegen bestätigst du deine E-Mail-Adresse über einen Link.</p>
      </section>

      <section class="register-section">
        <h2>Backup importieren</h2>
        <p class="muted register-subtitle">Wenn du bereits eine Sicherung aus Stundenfuchs hast, kannst du sie direkt bei der Registrierung einspielen.</p>
        <label class="form-field">
          <span class="form-field__label">Backup-Datei (optional)</span>
          <input class="input" type="file" name="backup_file" accept=".json,application/json" />
        </label>
        <p class="muted register-subtitle">
          Deine E-Mail-Adresse, dein Passwort und deine gewählte Zwei-Faktor-Anmeldung bleiben erhalten.
          Arbeitsdaten und fachliche Einstellungen werden aus dem Backup übernommen.
        </p>
      </section>

      <p class="muted register-section-note">
        Alle folgenden Einstellungen sind optional und können auch später in den Einstellungen geändert werden.
      </p>

      <section class="register-section">
        <h2>Bundesland</h2>
        <p class="muted register-subtitle">für das automatische Festlegen von Feiertagen</p>
        <label>
          <select name="federal_state">
            <option value="">Bundesland auswählen...</option>
            {% for state in federal_state_options %}<option value="{{ state.code }}">{{ state.label }}</option>{% endfor %}
          </select>
        </label>
      </section>

      <section class="register-section">
        <h2>Urlaub</h2>
        <p class="muted register-subtitle">Wieviele Urlaubstage pro Jahr stehen dir zur Verfügung</p>
        {{ input_field('', 'vacation_days_total', type='number', placeholder='z. B. 30', attrs='min="0" max="365" step="1"') }}
        {{ input_field('Wochenstunden (Standard)', 'weekly_target_hours', type='number', value='25', attrs='min="0.25" step="0.25"') }}
      </section>

      <section class="register-section">
        <h2>Erfassungsmodus</h2>
        <p class="muted register-subtitle">Lege fest, ob du deine Arbeitstage komplett selbst pflegst oder ob Stundenfuchs fehlende Arbeitstage bis heute automatisch ergänzt.</p>
        <label>
          <select name="entry_mode">
            <option value="manual" selected>Manuell</option>
            <option value="auto_until_today">Automatisch bis heute</option>
          </select>
        </label>
      </section>

      <section class="register-section">
        <h2>Überstunden</h2>
        <div class="register-grid-2">
          {{ input_field('Startdatum für Überstundenberechnung', 'overtime_start_date', type='date', value=today_iso) }}
          {{ input_field('Nach welchem Zeitraum verfallen Überstunden (Tage)', 'overtime_expiry_days', type='number', placeholder='optional', attrs='min="1" step="1"') }}
        </div>
        <label class="checkbox-row">
          <input type="checkbox" name="expire_negative_overtime" checked />
          <span>Negative Stunden verfallen auch</span>
        </label>
      </section>

      <section class="register-section">
        <h2>Gesamtarbeitsstunden</h2>
        <p class="muted register-subtitle">z. B. für die Übersicht zu geleisteten Praxisstunden im Anerkennungsjahr der Erzieherausbildung.</p>
        <label class="checkbox-row">
          <input type="checkbox" name="workhours_counter_enabled" />
          <span>Gesamtarbeitsstunden Counter aktivieren</span>
        </label>
      </section>

      <section class="register-section">
        <h2>Gesamtarbeitsstunden</h2>
        <p class="muted register-subtitle">z. B. für die Übersicht zu geleisteten Praxisstunden im Anerkennungsjahr der Erzieherausbildung.</p>
        <div class="register-grid-2 register-grid-counter">
          {{ input_field('Counter Startdatum', 'workhours_counter_start_date', type='date') }}
          {{ input_field('Counter Enddatum', 'workhours_counter_end_date', type='date') }}
        </div>
        {{ input_field('Bereits geleistete Zusatzstunden (optional)', 'workhours_counter_manual_offset_hours', type='number', placeholder='z. B. 80', attrs='min="0" step="0.25"') }}
        <p class="muted register-subtitle">Zusätzlich geleistete Stunden, z.B. aus Praktika</p>
        {{ input_field('Gesamtstundenziel (in Stunden)', 'workhours_counter_target_hours', type='number', placeholder='z. B. 1200', attrs='min="0.25" step="0.25"') }}
        <div class="register-checkbox-row">
          <label class="checkbox-row">
            <input type="checkbox" name="workhours_counter_show_in_header" />
            <span>Counter im Header anzeigen</span>
          </label>
          <label class="checkbox-row">
            <input type="checkbox" name="workhours_counter_target_email_enabled" />
            <span>Zielwarnung per E-Mail (wenn das Ziel im angegebenen Zeitraum nicht erreicht werden sollte aufgrund von z. B. Krankheit)</span>
          </label>
        </div>
      </section>

      <section class="register-section">
        <h2>Relevante Arbeitstage</h2>
        <p class="muted register-subtitle">
          Diese Tage steuern Soll und Urlaubslogik. Beispiel: Wenn du nur Montag bis Donnerstag arbeitest, werden Sollstunden auf diese vier Tage verteilt.
        </p>
        <fieldset class="weekday-fieldset register-weekday-fieldset">
          <div class="register-weekday-grid">
            {% for weekday in weekday_options %}
              <label class="checkbox-row">
                <input type="checkbox"
                       name="working_days"
                       value="{{ weekday.value }}"
                       {% if weekday.value < 5 %}checked{% endif %} />
                <span>{{ weekday.label }}</span>
              </label>
            {% endfor %}
          </div>
        </fieldset>
        <div class="register-checkbox-row">
          <label class="checkbox-row">
            <input type="checkbox" name="count_vacation_as_worktime" />
            <span>Urlaubstage wie reguläre Arbeitstage rechnen</span>
          </label>
          <label class="checkbox-row">
            <input type="checkbox" name="count_holiday_as_worktime" />
            <span>Feiertage wie reguläre Arbeitstage rechnen</span>
          </label>
          <label class="checkbox-row">
            <input type="checkbox" name="count_sick_as_worktime" />
            <span>Kranktage wie reguläre Arbeitstage rechnen</span>
          </label>
          <label class="checkbox-row">
            <input type="checkbox" name="automatic_break_rules_enabled" />
            <span>Gesetzliche Pausen automatisch nach deutscher Arbeitszeit berechnen</span>
          </label>
        </div>
      </section>

      <section class="register-section">
        <h2>Zwei-Faktor-Anmeldung</h2>
        <p class="muted register-subtitle">Zur Erhöhung der Sicherheit</p>
        <label>
          <select name="mfa_preference">
            <option value="none" selected>Keine 2FA</option>
            <option value="totp">Authenticator-App (6-stelliger Code)</option>
            <option value="email">E-Mail-Code</option>
          </select>
        </label>
        {% if not email_mfa_available %}
          <p class="muted">Hinweis: E-Mail-2FA ist aktuell nicht verfügbar, da kein Mailserver konfiguriert ist.</p>
        {% endif %}
      </section>

      <section class="register-actions">
        {{ button('Konto anlegen', type='submit', extra_class='register-submit') }}
      </section>
    </form>

    <p class="register-footer">
      Du hast bereits ein Konto? <a href="/login">Zur Anmeldung</a>
    </p>
  </section>
{% endblock %}