{{template "base" .}}

{{define "title"}}Mein Profil{{end}}

{{define "body"}}
<div style="display:flex; flex-direction:column; align-items:center; padding-top:32px;">

    <div style="width:88px; height:88px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:'Montserrat',sans-serif; font-size:34px; font-weight:700; color:#1a1008; box-shadow:0 4px 18px rgba(200,150,26,0.35); margin-bottom:20px; flex-shrink:0;">
        {{slice .User.Name 0 1}}
    </div>

    <h1 style="font-family:'Montserrat',sans-serif; font-size:28px; font-weight:700; color:var(--dark); text-align:center; margin-bottom:4px;">
        {{.User.Name}}{{if .User.AltName}} <span style="color:var(--text-muted); font-weight:600;">/ {{.User.AltName}}</span>{{end}}
    </h1>
    <p style="font-size:13px; font-weight:600; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin-bottom:36px;">Mitglied</p>

    <div style="background:var(--bg-card); border:1px solid var(--border); border-radius:12px; box-shadow:0 6px 32px rgba(0,0,0,0.10); width:100%; max-width:620px; overflow:hidden;">

        <div style="background:var(--dark); padding:16px 32px; border-bottom:3px solid var(--accent);">
            <span style="font-family:'Montserrat',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.5);">Profildaten</span>
        </div>

        <div style="padding:0 32px;">
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--border);">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">E-Mail</span>
                <span style="font-size:16px; color:var(--text);">{{.User.Email}}</span>
            </div>
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--border);">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">Telefon</span>
                <span style="font-size:16px; color:var(--text);">{{.User.PhoneNumber}}</span>
            </div>
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--border);">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">Land</span>
                <span style="font-size:16px; color:var(--text);">{{.User.Country}}</span>
            </div>
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--border);">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">Adresse</span>
                <span style="font-size:16px; color:var(--text);">{{.User.Address}}</span>
            </div>
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--border);">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">Geburtsdatum</span>
                <span style="font-size:16px; color:var(--text);">{{.User.DateOfBirth.Format "02.01.2006"}}</span>
            </div>
            <div style="display:flex; align-items:baseline; gap:16px; padding:18px 0;">
                <span style="font-size:13px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; width:140px; flex-shrink:0;">Mitglied seit</span>
                <span style="font-size:16px; color:var(--accent); font-weight:600;">{{.User.Created.Format "02.01.2006"}}</span>
            </div>
        </div>

        <div style="border-top:1px solid var(--border); background:#fef2f2; padding:20px 32px; display:flex; align-items:center; justify-content:space-between;">
            <div>
                <div style="font-size:13px; font-weight:700; color:#991b1b; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:2px;">Gefahrenzone</div>
                <div style="font-size:13px; color:#b91c1c;">Diese Aktion kann nicht rückgängig gemacht werden.</div>
            </div>
            <button class="btn btn--danger"
                    hx-delete="/users/{{.User.ID}}"
                    hx-confirm="Konto wirklich unwiderruflich löschen?">Konto löschen</button>
        </div>
    </div>
</div>
{{end}}