{% extends "admin/base-admin.html" %}
{% block title %}Admin Panel{% endblock %}
{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex flex-col md:flex-row gap-8">
        <div class="w-full md:w-72 flex-shrink-0">
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme" data-testid="admin-sidebar">

                {% set _sidebar_profile = sub_admin_profile if session.get('is_sub_admin') and sub_admin_profile else admin_profile %}
                {% if is_admin_user %}
                <a href="{{ full_url('/admin/profile') }}" class="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10 hover:from-primary/15 hover:to-secondary/15 dark:hover:from-primary-light/15 dark:hover:to-secondary-light/15 transition-all admin-link" data-testid="link-admin-profile">
                {% else %}
                <div class="flex items-center gap-3 px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/10 to-secondary/10 dark:from-primary-light/10 dark:to-secondary-light/10">
                {% endif %}
                    {% if _sidebar_profile and _sidebar_profile.profile_picture %}
                    <img src="{{ _sidebar_profile.profile_picture }}" alt="Profile" class="w-9 h-9 rounded-full object-cover border-2 border-primary/20 dark:border-primary-light/20 flex-shrink-0" data-testid="img-sidebar-avatar">
                    {% else %}
                    <div class="w-9 h-9 rounded-full bg-primary/10 dark:bg-primary-light/10 flex items-center justify-center flex-shrink-0 border-2 border-primary/20 dark:border-primary-light/20" data-testid="img-sidebar-avatar">
                        <i class="fa {{ 'fa-user' if is_admin_user else 'fa-user-pen' }} text-primary dark:text-primary-light text-sm"></i>
                    </div>
                    {% endif %}
                    <div class="min-w-0">
                        <div class="text-sm font-semibold text-gray-800 dark:text-gray-200 truncate" data-testid="text-sidebar-username">{{ _sidebar_profile.username if _sidebar_profile else 'admin' }}</div>
                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            {% if is_editor_user %}
                            <span class="text-primary dark:text-primary-light font-medium">{% trans %}Editor{% endtrans %}</span>
                            &nbsp;&bull;&nbsp;{{ editor_allowed_langs | join(', ') | upper }}
                            {% elif session.get('is_sub_admin') %}
                            <span class="text-primary dark:text-primary-light font-medium">{% trans %}Sub Admin{% endtrans %}</span>
                            {% else %}
                            {% trans %}View Profile{% endtrans %}
                            {% endif %}
                        </div>
                    </div>
                {% if is_admin_user %}
                </a>
                {% else %}
                </div>
                {% endif %}

                {% if is_admin_user %}
                <a href="{{ full_url('/admin/dashboard') }}" class="flex items-center gap-2 px-4 py-2.5 text-sm font-semibold text-indigo-700 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-dashboard">
                    <i class="fa fa-gauge-high mr-1 text-indigo-500"></i>{% trans %}Dashboard{% endtrans %}
                </a>
                {% endif %}

                <!-- Content Management -->
                <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-primary/5 to-secondary/5 dark:from-primary-light/5 dark:to-secondary-light/5">
                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Content Management{% endtrans %}</span>
                </div>
                <a href="{{ full_url('/admin/pages') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-all-pages">
                    <i class="fa fa-file-alt mr-2 text-primary"></i>{% trans %}All Pages{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=static" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-static-pages">
                    <i class="fa fa-home mr-2 text-blue-400"></i>{% trans %}Static Pages{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=converter-categories" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-conv-cats">
                    <i class="fa fa-folder mr-2 text-blue-500"></i>{% trans %}Converter Categories{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=converter-extensions" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-conv-exts">
                    <i class="fa fa-exchange-alt mr-2 text-green-500"></i>{% trans %}Converter Extensions{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=converter-pairs" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-conv-pairs">
                    <i class="fa fa-right-left mr-2 text-rose-500"></i>{% trans %}Converter Pairs{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=generator-categories" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-gen-cats">
                    <i class="fa fa-folder mr-2 text-purple-500"></i>{% trans %}Generator Categories{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=hash-generators" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-hash-gens">
                    <i class="fa fa-hashtag mr-2 text-violet-500"></i>{% trans %}Hash Generators{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=format-definitions" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-format-defs">
                    <i class="fa fa-file-lines mr-2 text-cyan-500"></i>{% trans %}Format Definitions{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/pages') }}?section=currencies" class="block px-4 py-2.5 pl-9 text-sm text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-currencies">
                    <i class="fa fa-coins mr-2 text-yellow-500"></i>{% trans %}Currency Pages{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/text-overrides') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-text-overrides">
                    <i class="fa fa-language mr-2 text-accent"></i>{% trans %}Text Overrides{% endtrans %}
                </a>

                {% if is_admin_user %}
                <!-- Site Settings (admin only) -->
                <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-secondary/5 to-accent/5 dark:from-secondary-light/5 dark:to-accent-light/5 mt-0">
                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Site Settings{% endtrans %}</span>
                </div>
                <a href="{{ full_url('/admin/general') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-general-settings">
                    <i class="fa fa-sliders mr-2 text-indigo-500"></i>{% trans %}General Settings{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/settings') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-settings">
                    <i class="fa fa-cog mr-2 text-secondary"></i>{% trans %}Homepage Settings{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/languages') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-languages">
                    <i class="fa fa-globe mr-2 text-teal-500"></i>{% trans %}Languages{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/editors') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-editors">
                    <i class="fa fa-user-pen mr-2 text-rose-500"></i>{% trans %}Editors{% endtrans %}
                </a>
                {% if not session.get('is_sub_admin') %}
                <a href="{{ full_url('/admin/admins') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-accounts">
                    <i class="fa fa-user-shield mr-2 text-indigo-500"></i>{% trans %}Admin Accounts{% endtrans %}
                </a>
                {% endif %}
                <a href="{{ full_url('/admin/security') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-security">
                    <i class="fa fa-shield-halved mr-2 text-orange-500"></i>{% trans %}Security{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/server-settings') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-server-settings">
                    <i class="fa fa-server mr-2 text-sky-500"></i>{% trans %}Server Settings{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/backups') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-backups">
                    <i class="fa fa-database mr-2 text-emerald-500"></i>{% trans %}Backups{% endtrans %}
                </a>

                <!-- Other (admin only) -->
                <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-yellow-500/5 to-cyan-500/5 dark:from-yellow-400/5 dark:to-cyan-400/5 mt-0">
                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}Other{% endtrans %}</span>
                </div>
                <a href="{{ full_url('/admin/reviews') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-reviews">
                    <i class="fa fa-star mr-2 text-yellow-400"></i>{% trans %}Reviews{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/blogs') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-blogs">
                    <i class="fa fa-blog mr-2 text-yellow-500"></i>{% trans %}Blogs{% endtrans %}
                    {% if pending_blogs_count and pending_blogs_count > 0 %}
                    <span class="ml-auto inline-flex items-center justify-center w-5 h-5 rounded-full bg-red-500 text-white text-[10px] font-bold" data-testid="badge-pending-blogs">{{ pending_blogs_count }}</span>
                    {% endif %}
                </a>
                <a href="{{ full_url('/admin/messages') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-messages">
                    <i class="fa fa-envelope mr-2 text-cyan-500"></i>{% trans %}Messages{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/system/health-panel') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-system-health">
                    <i class="fa fa-heart-pulse mr-2 text-red-500"></i>{% trans %}System Health{% endtrans %}
                </a>

                <!-- File & User Management (admin only) -->
                <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-green-500/5 to-teal-500/5 dark:from-green-400/5 dark:to-teal-400/5 mt-0">
                    <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{% trans %}File & User Management{% endtrans %}</span>
                </div>
                <a href="{{ full_url('/admin/files') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-files">
                    <i class="fa fa-folder-open mr-2 text-green-500"></i>{% trans %}File Management{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/users/files') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-user-files">
                    <i class="fa fa-folder-user mr-2 text-violet-500"></i>{% trans %}User Files{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/shares') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-shares">
                    <i class="fa fa-share-nodes mr-2 text-indigo-500"></i>{% trans %}Share Manager{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/deletion-log') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-deletion-log">
                    <i class="fa fa-trash-clock mr-2 text-red-500"></i>{% trans %}Deletion Log{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/users') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-users">
                    <i class="fa fa-users mr-2 text-teal-500"></i>{% trans %}Users{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/plans') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-plans">
                    <i class="fa fa-credit-card mr-2 text-blue-500"></i>{% trans %}Subscription Plans{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/payments') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-payments">
                    <i class="fa fa-money-bill-transfer mr-2 text-green-500"></i>{% trans %}Manual Payments{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/payment-gateways') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-payment-gateways">
                    <i class="fa fa-credit-card mr-2 text-indigo-500"></i>{% trans %}Payment Gateways{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/referrals') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-referrals">
                    <i class="fa fa-users-between-lines mr-2 text-purple-500"></i>{% trans %}Referrals{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/broadcast') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-broadcast">
                    <i class="fa fa-bullhorn mr-2 text-orange-500"></i>{% trans %}Broadcast{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/promo-codes') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-promo-codes">
                    <i class="fa fa-tag mr-2 text-green-500"></i>{% trans %}Promo Codes{% endtrans %}
                </a>
                <a href="{{ full_url('/admin/qr-settings') }}" class="block px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 border-b border-gray-100 dark:border-gray-800 transition-all admin-link" data-testid="link-admin-qr-settings">
                    <i class="fa fa-qrcode mr-2 text-primary"></i>{% trans %}QR Code Generator{% endtrans %}
                </a>
                {% endif %}

            </div>

            {% if is_admin_user %}
            <div class="mt-4 rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden transition-theme p-4">
                <p class="text-xs text-gray-500 dark:text-gray-400 leading-relaxed">
                    <i class="fa fa-info-circle mr-1 text-primary"></i>
                    <strong>{% trans %}Subdomain support:{% endtrans %}</strong> {% trans %}All page content (titles, descriptions, OG images, FAQs) works on both regular domain and subdomain routes automatically.{% endtrans %}
                </p>
            </div>
            {% endif %}

            <a href="{{ full_url('/admin/logout') }}" class="mt-4 flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800/50 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all" data-testid="link-logout-sidebar">
                <i class="fa fa-sign-out-alt"></i>{% trans %}Logout{% endtrans %}
            </a>
        </div>
        <div class="flex-1 min-w-0">
            {% block body %}{% endblock %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script>
        $(function() {
            var current = location.pathname + location.search;
            var bestMatch = null;
            var bestLen = 0;
            $('.admin-link').each(function() {
                var href = $(this).attr('href');
                if (current.indexOf(href) === 0 && href.length > bestLen) {
                    bestMatch = $(this);
                    bestLen = href.length;
                }
            });
            if (bestMatch) {
                bestMatch.addClass('bg-primary/10 dark:bg-primary-light/10 text-primary dark:text-primary-light font-semibold');
            }
        });
    </script>
    {% block page_scripts %}{% endblock %}
{% endblock %}