{{ define "content" }}
<div class="space-y-6">
    <header class="space-y-1">
        <h1 class="text-2xl font-bold leading-tight">{{ .locale.Tr "settings" }}</h1>
        <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.header.account" }}</p>
    </header>

    <!-- Avatar -->
    <section class="bg-card rounded-lg border">
        <div class="space-y-1 border-b px-4 py-3">
            <h2 class="font-semibold">{{ .locale.Tr "settings.avatar" }}</h2>
            <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.avatar-help" }}</p>
        </div>
        <div class="flex items-center gap-4 p-4">
            <div class="shrink-0">
                {{ if not (shouldGenerateAvatar .userLogged .DisableGravatar) }}
                    <img class="size-16 rounded-md border" src="{{ avatarUrl .userLogged .DisableGravatar }}" alt="{{ .userLogged.Username }}" />
                {{ else }}
                    <svg class="size-16 rounded-md border" data-jdenticon-value="{{ .userLogged.Username }}" width="64" height="64"></svg>
                {{ end }}
            </div>
            <div class="flex flex-auto flex-wrap items-center gap-3">
                <form action="{{ .c.ExternalUrl }}/-/settings/avatar" method="post" enctype="multipart/form-data">
                    {{ .csrfHtml }}
                    <input id="avatar" name="avatar" type="file" accept="image/png,image/jpeg,image/gif,image/webp" required onchange="this.form.submit()"
                           class="text-muted-foreground file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 block text-sm file:mr-4 file:cursor-pointer file:rounded-md file:border-0 file:px-4 file:py-2 file:text-sm file:font-medium" />
                </form>
                {{ if .userLogged.HasUploadedAvatar }}
                <form action="{{ .c.ExternalUrl }}/-/settings/avatar" method="post">
                    {{ .csrfHtml }}
                    <input type="hidden" name="_method" value="DELETE" />
                    <button type="submit" class="btn-sm-outline">{{ .locale.Tr "settings.avatar-remove" }}</button>
                </form>
                {{ end }}
            </div>
        </div>
    </section>

    <!-- Username -->
    <section class="bg-card rounded-lg border">
        <div class="border-b px-4 py-3">
            <h2 class="font-semibold">{{ .locale.Tr "settings.change-username" }}</h2>
        </div>
        <form action="{{ .c.ExternalUrl }}/-/settings/username" method="post" class="space-y-4 p-4">
            {{ .csrfHtml }}
            <input type="hidden" name="_method" value="PUT" />
            <div class="space-y-1.5">
                <label for="username-change" class="text-sm font-medium">{{ .locale.Tr "auth.username" }}</label>
                <input id="username-change" name="username" type="text" required autocomplete="off" value="{{ .userLogged.Username }}" class="input h-9 w-full max-w-sm" />
            </div>
            <div class="flex">
                <button type="submit" class="btn-sm">{{ .locale.Tr "settings.change-username" }}</button>
            </div>
        </form>
    </section>

    <!-- Email -->
    <section class="bg-card rounded-lg border">
        <div class="space-y-1 border-b px-4 py-3">
            <h2 class="font-semibold">{{ .locale.Tr "settings.email" }}</h2>
            <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.email-help" }}</p>
        </div>
        <form action="{{ .c.ExternalUrl }}/-/settings/email" method="post" class="space-y-4 p-4">
            {{ .csrfHtml }}
            <div class="space-y-1.5">
                <label for="email" class="text-sm font-medium">{{ .locale.Tr "settings.email" }}</label>
                <input id="email" name="email" type="email" value="{{ .userLogged.Email }}" autocomplete="off" class="input h-9 w-full max-w-sm" />
            </div>
            <div class="flex">
                <button type="submit" class="btn-sm">{{ .locale.Tr "settings.email-set" }}</button>
            </div>
        </form>
    </section>

    <!-- Danger zone -->
    <section class="border-destructive/40 overflow-hidden rounded-lg border">
        <div class="border-destructive/30 og-red border-b px-4 py-2">
            <h2 class="text-sm font-semibold">{{ .locale.Tr "settings.delete-account" }}</h2>
        </div>
        <div class="bg-card flex flex-wrap items-center justify-between gap-4 p-4">
            <p class="text-muted-foreground text-sm">{{ .locale.Tr "settings.delete-account" }}</p>
            <form action="{{ .c.ExternalUrl }}/-/settings/account" method="post" class="shrink-0">
                {{ .csrfHtml }}
                <input type="hidden" name="_method" value="DELETE" />
                <button type="submit" class="btn-sm bg-destructive text-white hover:bg-destructive/90"
                        _="on click if not window.confirm('{{ .locale.Tr "settings.delete-account-confirm" }}') halt the event">
                    {{ .locale.Tr "settings.delete-account" }}
                </button>
            </form>
        </div>
    </section>
</div>
{{ end }}