{{define "register"}}
{{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 "register_title"}}</h2>

        <div id="registerError" 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="registerForm" action="/register" 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 "register_username"}}</label>
                <input
                    type="text"
                    id="username"
                    name="username"
                    required
                    minlength="3"
                    maxlength="32"
                    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 "register_ph_username"}}"
                >
                <p class="text-xs text-gray-500 mt-1">{{index .Tr "register_username_hint"}}</p>
            </div>
            <div>
                <label for="display_name" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "register_display_name"}}</label>
                <input
                    type="text"
                    id="display_name"
                    name="display_name"
                    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 "register_ph_display_name"}}"
                >
                <p class="text-xs text-gray-500 mt-1">{{index .Tr "register_display_name_hint"}}</p>
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "register_email"}}</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    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 "register_ph_email"}}"
                >
                <p class="text-xs text-gray-500 mt-1">{{index .Tr "register_email_hint"}}</p>
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "register_password"}}</label>
                <input
                    type="password"
                    id="password"
                    name="password"
                    required
                    minlength="6"
                    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 "register_ph_password"}}"
                >
                <p class="text-xs text-gray-500 mt-1">{{index .Tr "register_password_hint"}}</p>
            </div>
            <div>
                <label for="confirm_password" class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "register_confirm_password"}}</label>
                <input
                    type="password"
                    id="confirm_password"
                    name="confirm_password"
                    required
                    minlength="6"
                    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 "register_ph_confirm_password"}}"
                >
            </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 "register_submit"}}
            </button>
        </form>

        <div class="mt-4 text-center">
            <span class="text-sm text-gray-600">{{index .Tr "register_have_account"}}</span>
            <a href="/login" class="text-sm text-blue-600 hover:text-blue-700 font-medium ml-1">{{index .Tr "register_login_link"}}</a>
        </div>
    </div>
</section>
{{template "footer" .}}

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