{% extends "admin/layout.html" %}
{% block title %}Editor Management{% endblock %}

{% block body %}
<div class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-900 dark:text-white">{% trans %}Editor Management{% endtrans %}</h2>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{% trans %}Editors can log in to translate page content for their assigned languages. They cannot access site settings or user data.{% endtrans %}</p>
        </div>
        <a href="{{ full_url('/admin/editors/new') }}" class="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-all" data-testid="btn-add-editor">
            <i class="fa fa-plus"></i>{% trans %}Add Editor{% endtrans %}
        </a>
    </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 %}

    <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 %}Editors{% endtrans %} ({{ editors | length }})</h3>
        </div>
        {% if editors %}
        <div class="divide-y divide-gray-100 dark:divide-gray-800">
            {% for editor in editors %}
            <div class="flex flex-col sm:flex-row sm:items-center justify-between px-6 py-4 gap-3 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-all" data-testid="editor-row-{{ editor.id }}">
                <div class="flex items-center gap-4 min-w-0">
                    <div class="w-10 h-10 rounded-full bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-user-pen text-rose-500 dark:text-rose-400"></i>
                    </div>
                    <div class="min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ editor.username }}</span>
                            {% if not editor.is_active %}
                            <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">{% trans %}Inactive{% endtrans %}</span>
                            {% else %}
                            <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">{% trans %}Active{% endtrans %}</span>
                            {% endif %}
                        </div>
                        <div class="mt-0.5 flex flex-wrap gap-1">
                            {% for lang_code in editor.allowed_languages %}
                            {% set lang_info = all_langs | selectattr('code', 'eq', lang_code) | first %}
                            <span class="text-xs px-1.5 py-0.5 rounded bg-primary/10 dark:bg-primary-light/10 text-primary dark:text-primary-light font-mono">
                                {{ lang_code.upper() }}{% if lang_info %} – {{ lang_info.name }}{% endif %}
                            </span>
                            {% endfor %}
                        </div>
                        <div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{% trans %}Created:{% endtrans %} {{ editor.created_at[:10] if editor.created_at else '—' }}</div>
                    </div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <a href="{{ full_url('/admin/editors/' + editor.id|string + '/edit') }}"
                        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all"
                        data-testid="btn-edit-editor-{{ editor.id }}">
                        <i class="fa fa-pen text-primary"></i>{% trans %}Edit{% endtrans %}
                    </a>
                    <form method="POST" action="{{ full_url('/admin/editors/' + editor.id|string + '/delete') }}" class="inline" data-confirm="{% trans %}Delete this editor?{% endtrans %}&#10;&#10;• {{ _('Their editor account will be permanently removed') }}&#10;• {{ _('They will no longer be able to publish blog posts') }}">
                        <button type="submit" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-red-200 dark:border-red-800/50 text-xs text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" data-testid="btn-delete-editor-{{ editor.id }}">
                            <i class="fa fa-trash"></i>{% trans %}Delete{% endtrans %}
                        </button>
                    </form>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="px-6 py-12 text-center">
            <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-user-pen text-2xl text-gray-400 dark:text-gray-600"></i>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">{% trans %}No editors yet. Add your first editor to get started.{% endtrans %}</p>
            <a href="{{ full_url('/admin/editors/new') }}" class="inline-flex items-center gap-2 mt-4 px-4 py-2 rounded-xl bg-primary text-white text-sm font-medium hover:bg-primary/90 transition-all">
                <i class="fa fa-plus"></i>{% trans %}Add First Editor{% endtrans %}
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}