{% extends "base.html" %}

{% block title %}Admin Panel - {{ brand_name }}{% endblock %}

{% block header_actions %}
{# No specific header actions needed for the admin page #}
{% endblock %}

{% block main_content %}
<style>
/* Pending Changes Bar – slides out from top, back into top when hiding */
#pending-changes-bar {
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
#pending-changes-bar.pending-changes-bar-active {
    transform: translateY(0) scale(1);
    opacity: 1;
}
#pending-changes-bar.pending-changes-bar-inactive {
    transform: translateY(-100%) scale(0.95);
    opacity: 0;
    pointer-events: none;
}
</style>
<div class="page-header-glass flex-shrink-0">
    <div class="flex items-center">
        <div class="p-2.5 bg-blue-500/10 rounded-xl border border-blue-500/20 mr-4 shadow-sm">
            <i data-lucide="shield" class="h-6 w-6 text-blue-400"></i>
        </div>
        <h2 class="text-3xl font-bold text-white">Admin Panel</h2>
    </div>
    <p class="mt-2 text-zinc-500 text-sm ml-14">Manage system settings and user accounts.</p>
</div>

<div class="flex-1 overflow-y-auto p-6 lg:p-8">
    <div class="grid grid-cols-1 gap-6">
        {# System Settings #}
        <button id="open-system-settings"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-blue-500/10 flex items-center justify-center">
                <i data-lucide="settings" class="h-4 w-4 text-blue-400"></i>
            </div>
            <span class="text-white font-medium">System Settings</span>
        </button>

        {# System Actions #}
        <button id="open-system-actions"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-yellow-500/10 flex items-center justify-center">
                <i data-lucide="zap" class="h-4 w-4 text-yellow-400"></i>
            </div>
            <span class="text-white font-medium">System Actions</span>
        </button>

        {# User Management #}
        <button id="open-user-management"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-purple-500/10 flex items-center justify-center">
                <i data-lucide="users" class="h-4 w-4 text-purple-400"></i>
            </div>
            <span class="text-white font-medium">User Management</span>
        </button>

        {# Containers #}
        <button id="open-docker-config"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-indigo-500/10 flex items-center justify-center">
                <i data-lucide="box" class="h-4 w-4 text-indigo-400"></i>
            </div>
            <span class="text-white font-medium">Containers</span>
        </button>

        {# Backups #}
        <button id="open-backups"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-emerald-500/10 flex items-center justify-center">
                <i data-lucide="archive" class="h-4 w-4 text-emerald-400"></i>
            </div>
            <span class="text-white font-medium">Backups</span>
        </button>

        {# Git Policy & Limits #}
        <button id="open-git-policy"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-green-500/10 flex items-center justify-center">
                <i data-lucide="shield-check" class="h-4 w-4 text-green-400"></i>
            </div>
            <span class="text-white font-medium">Git Policy & Limits</span>
        </button>

        {# SMTP Settings #}
        <button id="open-smtp-settings"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-pink-500/10 flex items-center justify-center">
                <i data-lucide="mail" class="h-4 w-4 text-pink-400"></i>
            </div>
            <span class="text-white font-medium">SMTP Settings</span>
        </button>

        {# Credits Settings #}
        <button id="open-credits-settings"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-yellow-500/10 flex items-center justify-center">
                <i data-lucide="coins" class="h-4 w-4 text-yellow-400"></i>
            </div>
            <span class="text-white font-medium">Credits Settings</span>
        </button>

        {# User Reports #}
        <button id="open-user-reports"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-orange-500/10 flex items-center justify-center">
                <i data-lucide="flag" class="h-4 w-4 text-orange-400"></i>
            </div>
            <span class="text-white font-medium">User Reports</span>
        </button>

        {# Stripe Settings #}
        <button id="open-stripe-settings"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-indigo-500/10 flex items-center justify-center">
                <i data-lucide="credit-card" class="h-4 w-4 text-indigo-400"></i>
            </div>
            <span class="text-white font-medium">Stripe Settings</span>
        </button>

        {# Profiler — only when enabled (see System Settings) #}
        {% if settings.get('profiler_enabled', '0') == '1' %}
        <button id="open-profiler"
            class="admin-list-item w-full flex items-center gap-3 px-4 py-1.5 rounded-xl text-left transition-colors hover:bg-white/5 glass-panel border border-white/5">
            <div class="flex-shrink-0 w-7 h-7 rounded-lg bg-cyan-500/10 flex items-center justify-center">
                <i data-lucide="activity" class="h-4 w-4 text-cyan-400"></i>
            </div>
            <span class="text-white font-medium">Profiler</span>
        </button>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block portals %}
{# Pending Settings Changes Bar – in portals so it’s at top-level DOM (avoids nested overflow/transform issues) #}
<div id="pending-changes-bar-wrapper" class="hidden fixed top-4 left-1/2 -translate-x-1/2 z-[9999]">
    <div id="pending-changes-bar" class="px-6 py-2 rounded-2xl border border-blue-500/30 bg-blue-500/15 backdrop-blur shadow-xl flex items-center gap-4 pending-changes-bar-inactive">
        <span id="pending-changes-count" class="text-blue-400 font-bold">0</span>
        <span class="text-zinc-400 text-sm">pending change(s)</span>
        <button type="button" id="pending-view-btn" class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-blue-400 hover:bg-blue-500/10">
            <i data-lucide="eye" class="h-3.5 w-3.5 inline mr-1"></i> View
        </button>
        <button type="button" id="pending-apply-btn" class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-emerald-500 hover:bg-emerald-500/10">
            <i data-lucide="check" class="h-3.5 w-3.5 inline mr-1"></i> Apply
        </button>
    </div>
</div>
{% include "admin_modals/edit_user_modal.html" %}
{% include "admin_modals/trusted_ips_modal.html" %}
{% include "admin_modals/sys_confirm_modal.html" %}
{% include "admin_modals/review_changes_modal.html" %}
{% include "admin_modals/system_settings_modal.html" %}
{% include "admin_modals/system_actions_modal.html" %}
{% include "admin_modals/backups_modal.html" %}
{% include "admin_modals/docker_config_modal.html" %}
{% include "admin_modals/git_policy_modal.html" %}
{% include "admin_modals/user_management_modal.html" %}
{% include "admin_modals/smtp_settings_modal.html" %}
{% include "admin_modals/credits_settings_modal.html" %}
{% include "admin_modals/stripe_settings_modal.html" %}
{% include "admin_modals/manage_subscription_modal.html" %}
{% include "admin_modals/user_reports_modal.html" %}
{% if settings.get('profiler_enabled', '0') == '1' %}
{% include "admin_modals/profiler_modal.html" %}
{% endif %}
{% endblock %}

{% block scripts %}
<script>
    window.ADMIN_CONFIG = {
        users: {{ users | tojson | safe }},
        settings: {{ settings | tojson | safe }}
    };
</script>
<script src="{{ url_for('static', filename='js/admin.js') }}?v=8"></script>
{% endblock %}