{{define "content"}}
<div id="auth-form">
    <h2 class="text-xl font-semibold text-white mb-6">Set a new password</h2>

    {{if .Error}}
    <div class="bg-red-500/10 border border-red-500/30 text-red-400 rounded-lg px-4 py-3 mb-6 text-sm animate-fade-in" role="alert">
        {{.Error}}
    </div>
    {{end}}

    {{if .Success}}
    <div class="bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 rounded-lg px-4 py-3 mb-6 text-sm animate-fade-in" role="alert">
        {{.Success}}
    </div>
    <p class="text-center text-slate-400 text-sm mt-6">
        <a href="/login" class="text-indigo-400 hover:text-indigo-300 font-medium transition-colors">Sign in with your new password</a>
    </p>
    {{else}}
    <form
        hx-post="/reset-password"
        hx-target="#auth-form"
        hx-swap="outerHTML"
        hx-disabled-elt="button[type=submit], input"
        class="space-y-5"
    >
        <input type="hidden" name="token" value="{{.Token}}">

        <div>
            <label for="password" class="block text-sm font-medium text-slate-300 mb-1.5">New password</label>
            <input
                type="password"
                id="password"
                name="password"
                required
                minlength="8"
                autofocus
                autocomplete="new-password"
                class="w-full px-4 py-2.5 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors"
                placeholder="At least 8 characters"
            >
        </div>

        <div>
            <label for="password_confirm" class="block text-sm font-medium text-slate-300 mb-1.5">Confirm new password</label>
            <input
                type="password"
                id="password_confirm"
                name="password_confirm"
                required
                minlength="8"
                autocomplete="new-password"
                class="w-full px-4 py-2.5 bg-slate-700/50 border border-slate-600 rounded-lg text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors"
                placeholder="Repeat your password"
            >
        </div>

        <button
            type="submit"
            class="w-full py-2.5 px-4 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-slate-800 disabled:opacity-50 disabled:cursor-not-allowed"
        >
            <span class="htmx-indicator">Reset password</span>
            <span class="htmx-request hidden">Resetting...</span>
        </button>
    </form>
    {{end}}
</div>
{{end}}