{{define "setup"}}{{template "layout" .}}{{end}}
{{define "content"}}
<section class="onboarding-shell">
  <aside class="onboarding-intro">
    <div class="onboarding-brand-row">
      <div class="auth-brand auth-brand-inverse"><span>DD</span> DNS Control</div>
      <span class="onboarding-edition">Self-hosted</span>
    </div>
    <div class="onboarding-copy">
      <span class="onboarding-eyebrow">Erster Start</span>
      <h1>DNS-Verwaltung,<br>die einfach läuft.</h1>
      <p>Einrichten, verbinden, automatisch aktuell halten.</p>
    </div>
    <div class="onboarding-progress" aria-label="Einrichtung: Schritt 1 von 3">
      <div><span>Einrichtung</span><strong>1 von 3</strong></div>
      <span class="onboarding-progress-track" aria-hidden="true"><i></i></span>
    </div>
    <ol class="onboarding-steps" aria-label="Einrichtung">
      <li class="is-current" aria-current="step"><span>01</span><div><div class="onboarding-step-title"><strong>Administrator anlegen</strong><em>Aktuell</em></div><small>Sicheren Zugang für diese Instanz erstellen.</small></div></li>
      <li><span>02</span><div><strong>Dienste verbinden</strong><small>Hetzner und optional Pi-hole hinzufügen.</small></div></li>
      <li><span>03</span><div><strong>Automatisieren</strong><small>DNS-Einträge zuverlässig aktuell halten.</small></div></li>
    </ol>
  </aside>

  <section class="onboarding-card" aria-labelledby="setup-title">
    <div class="onboarding-form-wrap">
      <div class="onboarding-card-meta">
        <span class="setup-ready"><i aria-hidden="true"></i> Instanz bereit</span>
        <span>Schritt 1 von 3</span>
      </div>
      <header class="onboarding-form-heading">
        <h2 id="setup-title">Administrator anlegen</h2>
        <p class="onboarding-lede">Lege den ersten Administrator für diese Instanz an.</p>
      </header>

      <form action="/setup" method="post" class="stacked-form setup-form" data-setup-form>
        <input type="hidden" name="csrf" value="{{.CSRF}}">
        <div class="form-grid setup-field-row"><label>Benutzername
          <input name="username" type="text" value="{{index .Form "username"}}" autocomplete="username" autocapitalize="none" spellcheck="false" minlength="3" maxlength="40" required autofocus>
        </label>
        <label>Anzeigename
          <input name="display_name" type="text" value="{{index .Form "display_name"}}" autocomplete="name" maxlength="80" required>
        </label></div>
        <div class="form-grid setup-field-row"><label>Admin-Passphrase
          <input name="password" type="password" autocomplete="new-password" minlength="15" maxlength="128" aria-describedby="password-guidance" data-setup-password required>
        </label>
        <label>Passphrase wiederholen
          <input name="confirm_password" type="password" autocomplete="new-password" minlength="15" maxlength="128" data-setup-confirm required>
        </label></div>
        <div class="password-guidance" id="password-guidance" aria-live="polite">
          <span data-password-length><i aria-hidden="true">✓</i> Mindestens 15 Zeichen</span>
          <span data-password-match><i aria-hidden="true">✓</i> Eingaben stimmen überein</span>
        </div>
        <button class="button button-primary setup-submit" type="submit">Administrator erstellen <span aria-hidden="true">→</span></button>
      </form>

      <div class="onboarding-footer onboarding-mode {{if eq .Mode "https"}}is-secure{{end}}">
        <span aria-hidden="true">{{if eq .Mode "https"}}●{{else}}!{{end}}</span>
        <p><strong>{{if eq .Mode "https"}}HTTPS-Modus aktiv{{else}}LAN-Modus aktiv{{end}}</strong><small>{{if eq .Mode "https"}}Verschlüsselte Verbindung{{else}}Nur im lokalen Netz verwenden{{end}}</small></p>
      </div>
    </div>
  </section>
</section>
{{end}}