{{ define "content" }}
<div class="mx-auto w-full max-w-md">
    <div class="mb-6 flex flex-col items-center text-center">
        {{ if .oauthAvatarURL }}
        <img src="{{ .oauthAvatarURL }}" alt="Avatar" class="mb-3 size-16 rounded-full object-cover" />
        {{ end }}
        <h1 class="text-2xl font-bold leading-tight">{{ .title }}</h1>
        <p class="text-muted-foreground mt-1 text-sm">
            {{ .locale.Tr "auth.oauth.signing-in-with" .c.OIDCProviderName }}
        </p>
    </div>

    <div class="bg-card space-y-6 rounded-lg border p-6 shadow-sm sm:p-8">
        <form class="space-y-4" method="post">
            <div class="space-y-1.5">
                <label for="username" class="text-sm font-medium">{{ .locale.Tr "auth.username" }}</label>
                <input id="username" name="username" type="text" value="{{ .oauthNickname }}" required class="input w-full" />
            </div>

            <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="{{ .oauthEmail }}" class="input w-full" />
                <p class="text-muted-foreground text-xs">{{ .locale.Tr "settings.email-help" }}</p>
            </div>

            <button type="submit" class="btn w-full">
                {{ .locale.Tr "auth.oauth.complete-registration-button" }}
            </button>

            {{ .csrfHtml }}
        </form>

        <div class="border-border border-t" aria-hidden="true"></div>

        <div class="space-y-2 text-center">
            <p class="text-sm font-medium">{{ .locale.Tr "auth.oauth.existing-account" }}</p>
            <p class="text-muted-foreground text-sm">
                {{ .locale.Tr "auth.oauth.already-have-account" .c.OIDCProviderName }}
            </p>
            <a href="{{ .c.ExternalUrl }}/-/login" class="btn-outline w-full">{{ .locale.Tr "auth.login" }}</a>
        </div>
    </div>

    <p class="text-muted-foreground mt-4 text-center text-sm">
        <a href="{{ .c.ExternalUrl }}/-/login" class="text-primary font-medium hover:underline">{{ .locale.Tr "auth.oauth.cancel" }}</a>
    </p>
</div>
{{ end }}