{{template "base" .}}

{{define "title"}}Registrieren{{end}}

{{define "body"}}
<div class="page-header" style="text-align:center; border-bottom: none; margin-bottom: 32px;">
    <h1 class="page-title">Konto erstellen</h1>
    <p class="page-subtitle">Werden Sie Mitglied der Digitalen Partei Österreich</p>
</div>

<div class="auth-section">
    <div class="auth-card" style="max-width: 520px;">

        {{if .FormErrors}}
        <div class="alert alert--error">
            {{range .FormErrors}}<p>{{.}}</p>{{end}}
        </div>
        {{end}}

        <form method="POST" action="/register">
            <div style="display:grid; grid-template-columns:1fr 1fr; gap: 0 16px;">
                <div class="form-group">
                    <label class="form-label" for="name">Vollständiger Name</label>
                    <input class="form-input" type="text" id="name" name="name"
                           placeholder="Maria Muster" required autocomplete="name">
                </div>
                <div class="form-group">
                    <label class="form-label" for="alt_name">Alternativer Name <span style="font-weight:400; color:var(--text-muted)">(optional)</span></label>
                    <input class="form-input" type="text" id="alt_name" name="alt_name"
                           placeholder="Spitzname">
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="email">E-Mail-Adresse</label>
                <input class="form-input" type="email" id="email" name="email"
                       placeholder="ihre@email.at" required autocomplete="email">
            </div>

            <div class="form-group">
                <label class="form-label" for="username">Benutzername</label>
                <input class="form-input" type="text" id="username" name="username"
                       placeholder="maria.muster" required autocomplete="username">
            </div>

            <div class="form-group">
                <label class="form-label" for="password">Passwort</label>
                <input class="form-input" type="password" id="password" name="password"
                       placeholder="••••••••" required autocomplete="new-password">
            </div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap: 0 16px;">
                <div class="form-group">
                    <label class="form-label" for="phone_number">Telefonnummer</label>
                    <input class="form-input" type="tel" id="phone_number" name="phone_number"
                           placeholder="+43 660 123 4567" autocomplete="tel">
                </div>
                <div class="form-group">
                    <label class="form-label" for="date_of_birth">Geburtsdatum</label>
                    <input class="form-input" type="date" id="date_of_birth" name="date_of_birth" required>
                </div>
            </div>

            <div class="form-group">
                <label class="form-label" for="address">Adresse</label>
                <input class="form-input" type="text" id="address" name="address"
                       placeholder="Musterstraße 1, 1010 Wien" autocomplete="street-address">
            </div>

            <div class="form-group">
                <label class="form-label" for="country">Land</label>
                <input class="form-input" type="text" id="country" name="country"
                       placeholder="AT" value="AT" maxlength="2" autocomplete="country">
            </div>

            <button class="btn btn--primary btn--full" type="submit">Registrieren</button>
        </form>

        <p class="auth-divider">Bereits ein Konto? <a href="/" class="link">Anmelden</a></p>
    </div>
</div>
{{end}}