{% extends "admin/layout.html" %}
{% block title %}{{ 'Edit Editor' if editor else 'New Editor' }}{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex items-center gap-3">
        <a href="{{ full_url('/admin/editors') }}" class="flex items-center gap-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-primary dark:hover:text-primary-light transition-colors">
            <i class="fa fa-arrow-left text-xs"></i>{% trans %}Back to Editors{% endtrans %}
        </a>
    </div>

    <div>
        <h2 class="text-xl font-bold text-gray-900 dark:text-white">
            {% if editor %}{% trans %}Edit Editor{% endtrans %}{% else %}{% trans %}New Editor{% endtrans %}{% endif %}
        </h2>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
            {% if editor %}{% trans %}Update editor credentials and assigned languages.{% endtrans %}{% else %}{% trans %}Create a new editor account with limited access to the admin panel.{% endtrans %}{% endif %}
        </p>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    <form method="POST" class="space-y-6" data-testid="editor-form">
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-rose-500/5 to-primary/5 dark:from-rose-400/5 dark:to-primary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-user-pen mr-2"></i>{% trans %}Editor Details{% endtrans %}</h3>
            </div>
            <div class="p-6 space-y-5">
                <!-- Username -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="username">{% trans %}Username{% endtrans %}</label>
                    <input type="text" id="username" name="username" required autocomplete="off"
                        value="{{ editor.username if editor else '' }}"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        placeholder="{% trans %}Enter username{% endtrans %}"
                        data-testid="input-editor-username">
                </div>

                <!-- Password -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="password">
                        {% trans %}Password{% endtrans %}
                        {% if editor %}<span class="text-xs text-gray-400 dark:text-gray-500">({% trans %}leave blank to keep current{% endtrans %})</span>{% endif %}
                    </label>
                    <input type="password" id="password" name="password" autocomplete="new-password"
                        {% if not editor %}required{% endif %}
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        placeholder="{% if editor %}{% trans %}New password (optional){% endtrans %}{% else %}{% trans %}Enter password{% endtrans %}{% endif %}"
                        data-testid="input-editor-password">
                </div>

                <!-- Status -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">{% trans %}Status{% endtrans %}</label>
                    <select name="is_active"
                        class="w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 focus:ring-2 focus:ring-primary/50 outline-none transition-all text-sm"
                        data-testid="select-editor-status">
                        <option value="1" {% if not editor or editor.is_active %}selected{% endif %}>{% trans %}Active{% endtrans %}</option>
                        <option value="0" {% if editor and not editor.is_active %}selected{% endif %}>{% trans %}Inactive{% endtrans %}</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Allowed Languages -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme">
            <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-teal-500/5 to-primary/5 dark:from-teal-400/5 dark:to-primary-light/5">
                <h3 class="font-semibold text-gray-900 dark:text-white"><i class="fa fa-globe mr-2"></i>{% trans %}Allowed Languages{% endtrans %}</h3>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{% trans %}The editor can only edit content in the selected languages. English is always included.{% endtrans %}</p>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                    {% for lang in all_langs %}
                    <label class="flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-all {% if lang.code == 'en' %}opacity-70{% endif %}"
                        data-testid="lang-checkbox-{{ lang.code }}">
                        <input type="checkbox" name="allowed_languages" value="{{ lang.code }}"
                            {% if editor and lang.code in editor.allowed_languages %}checked{% endif %}
                            {% if not editor and lang.code == 'en' %}checked{% endif %}
                            {% if lang.code == 'en' %}disabled{% endif %}
                            class="w-4 h-4 rounded text-primary focus:ring-primary/30">
                        {% if lang.code == 'en' %}
                        <input type="hidden" name="allowed_languages" value="en">
                        {% endif %}
                        <div>
                            <div class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ lang.name }}</div>
                            <div class="text-xs text-gray-400 dark:text-gray-500 font-mono">{{ lang.code }}</div>
                        </div>
                    </label>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="flex items-center justify-end gap-3">
            <a href="{{ full_url('/admin/editors') }}" class="px-4 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                {% trans %}Cancel{% endtrans %}
            </a>
            <button type="submit" class="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-all" data-testid="btn-save-editor">
                <i class="fa fa-save"></i>
                {% if editor %}{% trans %}Save Changes{% endtrans %}{% else %}{% trans %}Create Editor{% endtrans %}{% endif %}
            </button>
        </div>
    </form>
</div>
{% endblock %}