{{define "login"}}
{{template "header" .}}
<section class="max-w-md mx-auto px-4 py-20">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">{{index .Tr "login_title"}}</h2>

        <div id="loginError" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 text-sm {{if not .Error}}hidden{{end}}">
            {{.Error}}
        </div>

        <form id="loginForm" action="/login" method="post" class="space-y-5">
            <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
            <div>
                <label for="username" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "login_username"}}</label>
                <input
                    type="text"
                    id="username"
                    name="username"
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                    placeholder="{{index .Tr "login_ph_user"}}"
                >
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "login_password"}}</label>
                <input
                    type="password"
                    id="password"
                    name="password"
                    required
                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors"
                    placeholder="{{index .Tr "login_ph_pass"}}"
                >
            </div>
            <button
                type="submit"
                class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer"
            >
                {{index .Tr "login_submit"}}
            </button>
        </form>

        {{if .AllowRegistration}}
        <div class="mt-4 text-center">
            <span class="text-sm text-gray-600">{{index .Tr "login_no_account"}}</span>
            <a href="/register" class="text-sm text-blue-600 hover:text-blue-700 font-medium ml-1">{{index .Tr "login_register_link"}}</a>
        </div>
        {{end}}
    </div>
</section>
{{template "footer" .}}

<script>
(function () {
    var form = document.getElementById('loginForm');
    if (!form) return;
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = e.submitter || null;
        if (btn) btn.disabled = true;
        blogAPI('POST', '/api/auth/login', blogForm(form, btn)).then(function (r) {
            if (btn) btn.disabled = false;
            if (r.ok) { window.location.href = r.redirect || '/'; }
            else { blogShowError('loginError', r.error || 'Failed to sign in.'); }
        });
    });
})();
</script>
{{end}}