{% extends "admin/layout.html" %}
{% block title %}Create New User – Admin{% endblock %}
{% block body %}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white" data-testid="heading-create-user">{% trans %}Create New Account{% endtrans %}</h1>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{% trans %}Manually create a user or content editor account{% endtrans %}</p>
    </div>
    <a href="{{ full_url('/admin/users') }}" class="inline-flex items-center gap-2 px-4 py-2 rounded-xl border border-gray-300 dark:border-gray-600 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
        <i class="fa fa-arrow-left text-gray-500"></i> {% trans %}Back to Users{% endtrans %}
    </a>
</div>

{% if errors %}
<div class="mb-6 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-400 text-sm space-y-1">
    {% for err in errors %}
    <div><i class="fa fa-circle-exclamation mr-1"></i>{{ err }}</div>
    {% endfor %}
</div>
{% endif %}

<div class="max-w-lg rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-6">
    <form method="post" class="space-y-5">
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Account Role{% endtrans %} <span class="text-red-500">*</span></label>
            <div class="grid grid-cols-2 gap-3" id="role-selector">
                <label class="flex items-center gap-2.5 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-indigo-400 transition-all role-opt">
                    <input type="radio" name="account_type" value="user" checked class="text-indigo-600" data-testid="radio-role-user">
                    <span class="flex flex-col">
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans %}Regular User{% endtrans %}</span>
                        <span class="text-xs text-gray-400">{% trans %}Full dashboard access, billing, API keys{% endtrans %}</span>
                    </span>
                </label>
                <label class="flex items-center gap-2.5 p-3 rounded-lg border border-gray-200 dark:border-gray-700 cursor-pointer hover:border-indigo-400 transition-all role-opt">
                    <input type="radio" name="account_type" value="editor" class="text-indigo-600" data-testid="radio-role-editor">
                    <span class="flex flex-col">
                        <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{% trans %}Content Editor{% endtrans %}</span>
                        <span class="text-xs text-gray-400">{% trans %}Can edit blog posts and content pages{% endtrans %}</span>
                    </span>
                </label>
            </div>
        </div>
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Username{% endtrans %} <span class="text-red-500">*</span></label>
            <input type="text" name="username" value="{{ form.username if form else '' }}" required minlength="3"
                placeholder="{% trans %}e.g. john_doe{% endtrans %}"
                class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                data-testid="input-username">
        </div>
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Email Address{% endtrans %} <span class="text-red-500">*</span></label>
            <input type="email" name="email" value="{{ form.email if form else '' }}" required
                placeholder="{% trans %}user@example.com{% endtrans %}"
                class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                data-testid="input-email">
        </div>
        <div>
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Password{% endtrans %} <span class="text-red-500">*</span></label>
            <input type="password" name="password" required minlength="6"
                placeholder="{% trans %}Minimum 6 characters{% endtrans %}"
                class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                data-testid="input-password">
        </div>
        <div class="user-only-fields">
            <label class="block text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1 uppercase tracking-wider">{% trans %}Plan{% endtrans %}</label>
            <select name="plan_id"
                class="w-full px-3 py-2.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none transition-all text-sm"
                data-testid="select-plan">
                {% for plan in plans %}
                <option value="{{ plan.id }}" {% if form and form.plan_id == plan.id %}selected{% elif plan.price_monthly == 0 and not form %}selected{% endif %}>
                    {{ plan.name }}{% if plan.price_monthly > 0 %} – ${{ plan.price_monthly }}/mo{% endif %}
                </option>
                {% endfor %}
            </select>
        </div>
        <div class="user-only-fields">
            <label class="flex items-center gap-2.5 cursor-pointer">
                <input type="checkbox" name="email_verified" value="1" checked
                    class="w-4 h-4 rounded border-gray-300 dark:border-gray-600 text-indigo-600 focus:ring-indigo-400"
                    data-testid="checkbox-email-verified">
                <span class="text-sm text-gray-700 dark:text-gray-300">{% trans %}Mark email as verified{% endtrans %}</span>
            </label>
            <p class="ml-6 text-xs text-gray-400 mt-0.5">{% trans %}Uncheck to require the user to verify their email on first login.{% endtrans %}</p>
        </div>
        <div class="flex gap-3 pt-2">
            <button type="submit"
                class="flex-1 px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white font-semibold text-sm shadow-lg shadow-indigo-500/30 hover:shadow-xl transition-all duration-200"
                data-testid="btn-create-user">
                <i class="fa fa-user-plus mr-2"></i>{% trans %}Create Account{% endtrans %}
            </button>
            <a href="{{ full_url('/admin/users') }}"
                class="px-5 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 font-medium text-sm hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                {% trans %}Cancel{% endtrans %}
            </a>
        </div>
    </form>
</div>
{% endblock %}