{{define "user_form"}}
{{template "header" .}}
<section class="max-w-3xl mx-auto px-4 py-10">
    <h2 class="text-2xl font-bold text-gray-900 mb-8">{{.FormTitleText}}</h2>

    <div id="userFormError" 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="userForm" action="{{.FormAction}}" method="post" class="space-y-6">
        <input type="hidden" name="_csrf" value="{{.CSRFToken}}">
        <!-- Username (read-only on edit) -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_username"}}</label>
            {{if .FormIsEdit}}
                <input type="text" value="{{.FormUsername}}" readonly
                    class="w-full px-4 py-2 border border-gray-200 rounded-lg bg-gray-100 text-gray-500 cursor-not-allowed">
            {{else}}
                <input type="text" name="username" value="{{.FormUsername}}"
                    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 "user_username"}}">
            {{end}}
        </div>

        <!-- Password -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_password"}}</label>
            <input type="password" name="password" value="{{.FormPassword}}"
                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 "user_password"}}">
            {{if .FormIsEdit}}
                <p class="text-xs text-gray-400 mt-1">{{index .Tr "user_password_hint"}}</p>
            {{end}}
        </div>

        <!-- Display name -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_display_name"}}</label>
            <input type="text" name="display_name" value="{{.FormDisplayName}}"
                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">
        </div>

        <!-- Email -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_email"}}</label>
            <input type="email" name="email" value="{{.FormEmail}}"
                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">
        </div>

        <!-- Gender -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_gender"}}</label>
            <select name="gender"
                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 bg-white">
                <option value="other" {{if eq .FormGender "other"}}selected{{end}}>{{.TrGenderOther}}</option>
                <option value="male" {{if eq .FormGender "male"}}selected{{end}}>{{.TrGenderMale}}</option>
                <option value="female" {{if eq .FormGender "female"}}selected{{end}}>{{.TrGenderFemale}}</option>
            </select>
        </div>

        <!-- Birthday -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_birthday"}}</label>
            <input type="date" name="birthday" value="{{.FormBirthday}}"
                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">
        </div>

        <!-- Role -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_role"}}</label>
            <select name="role"
                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 bg-white">
                <option value="{{.RoleAuthor}}" {{if eq .FormRole .RoleAuthor}}selected{{end}}>{{index .Tr "role_author"}}</option>
                <option value="{{.RoleAdmin}}" {{if eq .FormRole .RoleAdmin}}selected{{end}}>{{index .Tr "role_admin"}}</option>
            </select>
        </div>

        <!-- Status -->
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">{{index .Tr "user_status"}}</label>
            <select name="status"
                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 bg-white">
                <option value="{{.StatusNormal}}" {{if eq .FormStatus .StatusNormal}}selected{{end}}>{{index .Tr "status_normal"}}</option>
                <option value="{{.StatusDisabled}}" {{if eq .FormStatus .StatusDisabled}}selected{{end}}>{{index .Tr "status_disabled"}}</option>
                <option value="{{.StatusLocked}}" {{if eq .FormStatus .StatusLocked}}selected{{end}}>{{index .Tr "status_locked"}}</option>
                <option value="{{.StatusUnactivated}}" {{if eq .FormStatus .StatusUnactivated}}selected{{end}}>{{index .Tr "status_unactivated"}}</option>
            </select>
        </div>

        <!-- Submit -->
        <div class="flex gap-3">
            <button type="submit"
                class="px-6 py-3 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors cursor-pointer">
                {{index .Tr "settings_save"}}
            </button>
            <a href="/admin/users"
                class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-medium hover:bg-gray-300 transition-colors">
                {{index .Tr "article_back_home"}}
            </a>
        </div>
    </form>
</section>
{{template "footer" .}}

<script>
(function () {
    var form = document.getElementById('userForm');
    if (!form) return;
    var userId = {{ .FormID }};
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        var btn = e.submitter || null;
        var method = userId ? 'PUT' : 'POST';
        var url = userId ? '/api/admin/users/' + userId : '/api/admin/users';
        blogAPI(method, url, blogForm(form, btn)).then(function (r) {
            if (r.ok) { window.location.href = r.redirect || '/admin/users'; }
            else { blogShowError('userFormError', r.error || 'Failed to save user.'); }
        });
    });
})();
</script>
{{end}}