{% extends "admin/layout.html" %}
{% block title %}Admin Accounts – Admin{% endblock %}

{% block body %}
<div class="flex items-center gap-3 mb-6">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
        <i class="fa fa-user-shield text-indigo-500"></i> {% trans %}Admin Accounts{% endtrans %}
    </h1>
    <span class="text-xs px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 font-semibold">{% trans %}Main Admin Only{% endtrans %}</span>
</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="grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Create Sub-Admin Form -->
    <div class="lg:col-span-1">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
                <i class="fa fa-user-plus text-indigo-500"></i> {% trans %}Add Sub-Admin{% endtrans %}
            </h2>
            <form method="POST" action="{{ full_url('/admin/admins/new') }}" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Username{% endtrans %} <span class="text-red-500">*</span></label>
                    <input type="text" name="username" required autocomplete="off"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-indigo-400/40 outline-none transition-all"
                        placeholder="e.g. john_admin">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Email{% endtrans %} <span class="text-gray-400 font-normal">({% trans %}optional{% endtrans %})</span></label>
                    <input type="email" name="email" autocomplete="off"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-indigo-400/40 outline-none transition-all"
                        placeholder="admin@example.com">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Password{% endtrans %} <span class="text-red-500">*</span></label>
                    <input type="password" name="password" required minlength="6" autocomplete="new-password"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-indigo-400/40 outline-none transition-all"
                        placeholder="{% trans %}Min 6 characters{% endtrans %}">
                </div>
                <div>
                    <label class="block text-xs font-semibold text-gray-600 dark:text-gray-400 mb-1.5">{% trans %}Confirm Password{% endtrans %} <span class="text-red-500">*</span></label>
                    <input type="password" name="confirm_password" required minlength="6" autocomplete="new-password"
                        class="w-full px-3 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm focus:ring-2 focus:ring-indigo-400/40 outline-none transition-all"
                        placeholder="{% trans %}Repeat password{% endtrans %}">
                </div>
                <div class="pt-1">
                    <button type="submit" class="w-full px-4 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-bold shadow-lg shadow-indigo-600/20 transition-all">
                        <i class="fa fa-user-plus mr-1.5"></i>{% trans %}Create Sub-Admin{% endtrans %}
                    </button>
                </div>
            </form>
            <div class="mt-4 p-3 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-800/40">
                <p class="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
                    <i class="fa fa-info-circle mr-1"></i>
                    {% trans %}Sub-admins get full admin access. They can optionally set up their own 2FA from their profile page. Only you can reset their 2FA.{% endtrans %}
                </p>
            </div>
        </div>
    </div>

    <!-- Sub-Admin List -->
    <div class="lg:col-span-2">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5">
            <h2 class="text-base font-bold text-gray-800 dark:text-gray-200 mb-4 flex items-center gap-2">
                <i class="fa fa-users text-gray-500"></i> {% trans %}Sub-Admin Accounts{% endtrans %}
                <span class="ml-1 text-xs font-normal text-gray-400 dark:text-gray-500">({{ admins|length }})</span>
            </h2>
            {% if admins %}
            <div class="space-y-3">
                {% for admin in admins %}
                <div class="flex items-center gap-3 p-3 rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    <div class="w-9 h-9 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center flex-shrink-0">
                        <span class="text-sm font-bold text-indigo-600 dark:text-indigo-400">{{ admin.username[0].upper() }}</span>
                    </div>
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ admin.username }}</span>
                            {% if admin.is_active %}
                            <span class="text-xs px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400">{% trans %}Active{% endtrans %}</span>
                            {% else %}
                            <span class="text-xs px-1.5 py-0.5 rounded bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400">{% trans %}Inactive{% endtrans %}</span>
                            {% endif %}
                            {% if admin.totp_enabled %}
                            <span class="text-xs px-1.5 py-0.5 rounded bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400 flex items-center gap-1">
                                <i class="fa fa-shield-halved text-[10px]"></i> {% trans %}2FA On{% endtrans %}
                            </span>
                            {% endif %}
                        </div>
                        <div class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
                            {{ admin.email or '—' }} &bull; {% trans %}Added{% endtrans %} {{ admin.created_at[:10] if admin.created_at else '—' }}
                        </div>
                    </div>
                    <div class="flex items-center gap-2 flex-shrink-0">
                        {% if admin.totp_enabled %}
                        <form method="POST" action="{{ full_url('/admin/admins/' ~ admin.id ~ '/reset-2fa') }}"
                              data-confirm="Reset 2FA for {{ admin.username }}?&#10;&#10;• Their current authenticator codes will stop working&#10;• They will be prompted to re-enroll on next login">
                            <button type="submit" title="{% trans %}Reset 2FA (secret bypass){% endtrans %}"
                                class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 text-yellow-700 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-all">
                                <i class="fa fa-shield-halved"></i> {% trans %}Reset 2FA{% endtrans %}
                            </button>
                        </form>
                        {% endif %}
                        <form method="POST" action="{{ full_url('/admin/admins/' ~ admin.id ~ '/delete') }}"
                              data-confirm="Delete sub-admin {{ admin.username }}?&#10;&#10;• Their admin account will be permanently removed&#10;• They will lose all admin panel access immediately">
                            <button type="submit" title="{% trans %}Delete{% endtrans %}"
                                class="inline-flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all">
                                <i class="fa fa-trash"></i> {% trans %}Delete{% endtrans %}
                            </button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-10 text-gray-400 dark:text-gray-500">
                <i class="fa fa-user-shield text-4xl mb-3 opacity-40"></i>
                <p class="text-sm">{% trans %}No sub-admin accounts yet.{% endtrans %}</p>
                <p class="text-xs mt-1">{% trans %}Use the form on the left to add one.{% endtrans %}</p>
            </div>
            {% endif %}
        </div>

        <!-- ADMIN_BYPASS_2FA hint (only visible to main admin, hidden in prod ideally) -->
        <div class="mt-4 rounded-xl border border-orange-200 dark:border-orange-800/50 bg-orange-50 dark:bg-orange-900/20 p-4">
            <h3 class="text-sm font-semibold text-orange-700 dark:text-orange-400 mb-2 flex items-center gap-2">
                <i class="fa fa-key"></i> {% trans %}Emergency 2FA Bypass (Main Admin){% endtrans %}
            </h3>
            <p class="text-xs text-orange-700 dark:text-orange-400 leading-relaxed">
                {% trans %}If your authenticator app stops working and you cannot log in, set <code class="bg-orange-100 dark:bg-orange-900/40 px-1 rounded font-mono">ADMIN_BYPASS_2FA=1</code> in your <code class="bg-orange-100 dark:bg-orange-900/40 px-1 rounded font-mono">.env</code> file and restart the app. This lets you log in without a 2FA code. Once logged in, disable 2FA from your profile page, then remove the env var.{% endtrans %}
            </p>
            <p class="text-xs text-orange-600 dark:text-orange-400 mt-2">
                {% trans %}Alternatively, run <code class="bg-orange-100 dark:bg-orange-900/40 px-1 rounded font-mono">python reset-admin-2fa.py</code> on the server to wipe the TOTP secret directly from the database.{% endtrans %}
            </p>
        </div>
    </div>
</div>
{% endblock %}