{{ define "content" }}
<div class="mx-auto w-full max-w-md">
    <div class="mb-6 flex flex-col items-center text-center">
        {{ if .c.CustomLogo }}
        <img src="{{ custom .c.CustomLogo }}" class="mb-3 h-12 object-cover" alt="Logo" />
        {{ else }}
        <img src="{{ asset "img/opengist.svg" }}" class="mb-3 size-12" alt="Logo" />
        {{ end }}
        <h1 class="text-2xl font-bold leading-tight">
            {{ if .isLoginPage }}{{ .locale.Tr "auth.login" }}{{ else }}{{ .locale.Tr "auth.signup" }}{{ end }} to {{ if .c.CustomName }}{{ .c.CustomName }}{{ else }}Opengist{{ end }}
        </h1>
    </div>

    {{ if .disableSignup }}
    <div class="bg-card rounded-lg border p-6 text-center">
        <p class="text-muted-foreground text-sm italic">{{ .locale.Tr "auth.signup-disabled" }}</p>
    </div>
    {{ else }}
    <div class="bg-card space-y-6 rounded-lg border p-6 shadow-sm sm:p-8">

        {{ if not .disableForm }}
        <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" autocomplete="username" required class="input w-full" />
            </div>

            <div class="space-y-1.5">
                <label for="password" class="text-sm font-medium">{{ .locale.Tr "auth.password" }}</label>
                <input id="password" name="password" type="password" autocomplete="{{ if .isLoginPage }}current-password{{ else }}new-password{{ end }}" required class="input w-full" />
            </div>

            <button type="submit" class="btn w-full">
                {{ if .isLoginPage }}{{ .locale.Tr "auth.login" }}{{ else }}{{ .locale.Tr "auth.signup" }}{{ end }}
            </button>

            {{ .csrfHtml }}
        </form>
        {{ end }}

        {{ if and .isLoginPage (not .disableForm) }}
        <div class="border-border border-t" aria-hidden="true"></div>
        <form id="webauthn">
            {{ .csrfHtml }}
            <button type="button" id="login-passkey-button" class="btn-outline w-full">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" />
                </svg>
                {{ .locale.Tr "auth.mfa.login-with-passkey" }}
            </button>
        </form>
        <p id="login-passkey-wait" class="text-muted-foreground hidden text-center text-sm font-medium">{{ .locale.Tr "auth.mfa.waiting-for-passkey-input" }}</p>
        {{ end }}

        {{ if or .githubOauth .gitlabOauth .giteaOauth .oidcOauth }}
            {{ if not .disableForm }}
            <div class="border-border border-t" aria-hidden="true"></div>
            {{ end }}

            <div class="space-y-2">
                {{ if .githubOauth }}
                <a hx-boost="false" href="{{ .c.ExternalUrl }}/oauth/github" class="btn-outline w-full">{{ .locale.Tr "auth.oauth" "GitHub" }}</a>
                {{ end }}
                {{ if .gitlabOauth }}
                <a hx-boost="false" href="{{ .c.ExternalUrl }}/oauth/gitlab" class="btn-outline w-full">{{ .locale.Tr "auth.oauth" .c.GitlabName }}</a>
                {{ end }}
                {{ if .giteaOauth }}
                <a hx-boost="false" href="{{ .c.ExternalUrl }}/oauth/gitea" class="btn-outline w-full">{{ .locale.Tr "auth.oauth" .c.GiteaName }}</a>
                {{ end }}
                {{ if .oidcOauth }}
                <a hx-boost="false" href="{{ .c.ExternalUrl }}/oauth/openid-connect" class="btn-outline w-full">
                    {{ if .c.OIDCProviderName }}Connect with {{ .c.OIDCProviderName }} account{{ else }}Continue with OpenID account{{ end }}
                </a>
                {{ end }}
            </div>
        {{ end }}

        {{ if not .disableForm }}
        <p class="text-muted-foreground text-center text-sm">
            {{ if .isLoginPage }}
                {{ if not .DisableSignup }}
                <a href="{{ .c.ExternalUrl }}/-/register" class="text-primary font-medium hover:underline">{{ .locale.Tr "auth.register-instead" }} →</a>
                {{ end }}
            {{ else }}
                <a href="{{ .c.ExternalUrl }}/-/login" class="text-primary font-medium hover:underline">{{ .locale.Tr "auth.login-instead" }} →</a>
            {{ end }}
        </p>
        {{ end }}
    </div>
    {{ end }}
</div>

<script type="module" src="{{ asset "ts/webauthn.ts" }}"></script>
{{ end }}