{{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>

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

        <form action="/register" method="post" class="space-y-5">
            <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" .}}
{{end}}