{% extends "base.html" %}
{% block title %}{{ _('Dashboard – OnlineConvert') }}{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    <!-- Email verification banner -->
    {% if user and not user.get('email_verified', 1) %}
    <div class="mb-5 flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-3 rounded-xl border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-900/20" data-testid="banner-email-unverified">
        <div class="flex items-center gap-2 flex-1">
            <i class="fa fa-triangle-exclamation text-amber-500 text-lg flex-shrink-0"></i>
            <div>
                <span class="text-sm font-semibold text-amber-800 dark:text-amber-300">{{ _('Please verify your email address.') }}</span>
                <span class="text-sm text-amber-700 dark:text-amber-400 ml-1">{{ _('Check your inbox for a verification link.') }}</span>
            </div>
        </div>
        <form method="POST" action="{{ full_url('/resend-verification') }}" class="flex-shrink-0">
            <button type="submit" class="px-3 py-1.5 rounded-lg bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold transition-colors" data-testid="btn-resend-verification">
                <i class="fa fa-envelope mr-1"></i>{{ _('Resend Email') }}
            </button>
        </form>
    </div>
    {% endif %}

    <div class="flex flex-col lg:flex-row gap-6">

        <!-- Sidebar -->
        <aside class="w-full lg:w-64 flex-shrink-0">
            <div class="rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 overflow-hidden sticky top-20">
                <!-- User info -->
                <div class="flex items-center gap-3 px-4 py-4 border-b border-gray-100 dark:border-gray-800 bg-gradient-to-r from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20">
                    <div class="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0 shadow-md overflow-hidden flex-shrink-0"
                         style="background: linear-gradient(135deg, #6366f1, #8b5cf6)">
                        {% if user and user.get('profile_picture') %}
                        <img src="/static/avatars/{{ user.profile_picture }}" alt="{{ user.username }}" class="w-full h-full object-cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
                        <span style="display:none">{{ (user.username[0] if user else 'U')|upper }}</span>
                        {% else %}
                        {{ (user.username[0] if user else 'U')|upper }}
                        {% endif %}
                    </div>
                    <div class="min-w-0">
                        <div class="text-sm font-bold text-gray-800 dark:text-gray-200 truncate" data-testid="text-dash-username">
                            {{ user.get('display_name') or user.username if user else _('User') }}
                        </div>
                        <div class="text-xs {% if plan and plan.price_monthly > 0 %}text-indigo-600 dark:text-indigo-400 font-semibold{% else %}text-gray-400{% endif %}">
                            {% if plan and plan.price_monthly > 0 %}<i class="fa fa-crown mr-0.5 text-[10px]"></i> {{ plan.name }}{% else %}{{ _('Free Plan') }}{% endif %}
                        </div>
                    </div>
                </div>

                <!-- Navigation -->
                <nav class="py-1">
                    <div class="px-3 py-2">
                        <span class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Main') }}</span>
                    </div>
                    <a href="{{ full_url('/dashboard') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-indigo-400 {% if active_page == 'overview' %}bg-indigo-50 dark:bg-indigo-900/20 border-indigo-500 text-indigo-700 dark:text-indigo-400{% endif %}" data-testid="link-dash-overview">
                        <i class="fa fa-gauge-high w-4 text-center text-indigo-500"></i> {{ _('Overview') }}
                    </a>
                    <a href="{{ full_url('/dashboard/files') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-blue-400 {% if active_page == 'files' %}bg-blue-50 dark:bg-blue-900/20 border-blue-500 text-blue-700 dark:text-blue-400{% endif %}" data-testid="link-dash-files">
                        <i class="fa fa-folder-open w-4 text-center text-blue-500"></i> {{ _('My Files') }}
                    </a>
                    <a href="{{ full_url('/dashboard/inbox') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-pink-400 {% if active_page == 'inbox' %}bg-pink-50 dark:bg-pink-900/20 border-pink-500 text-pink-700 dark:text-pink-400{% endif %}" data-testid="link-dash-inbox">
                        <i class="fa fa-inbox w-4 text-center text-pink-500"></i>
                        {{ _('Inbox') }}
                        {% if inbox_unread and inbox_unread > 0 %}
                        <span class="ml-auto text-[10px] px-1.5 py-0.5 rounded-full bg-red-500 text-white font-bold" data-testid="badge-inbox-unread">{{ inbox_unread }}</span>
                        {% endif %}
                    </a>
                    <a href="{{ full_url('/dashboard/referrals') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-green-400 {% if active_page == 'referrals' %}bg-green-50 dark:bg-green-900/20 border-green-500 text-green-700 dark:text-green-400{% endif %}" data-testid="link-dash-referrals">
                        <i class="fa fa-users-between-lines w-4 text-center text-green-500"></i> {{ _('Referrals') }}
                    </a>
                    <a href="{{ full_url('/dashboard/teams') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-purple-400 {% if active_page == 'teams' %}bg-purple-50 dark:bg-purple-900/20 border-purple-500 text-purple-700 dark:text-purple-400{% endif %}" data-testid="link-dash-teams">
                        <i class="fa fa-users w-4 text-center text-purple-500"></i> {{ _('Teams') }}
                    </a>

                    <div class="px-3 py-2 mt-1">
                        <span class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Account') }}</span>
                    </div>
                    <a href="{{ full_url('/dashboard/profile') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-indigo-400 {% if active_page == 'profile' %}bg-indigo-50 dark:bg-indigo-900/20 border-indigo-500 text-indigo-700 dark:text-indigo-400{% endif %}" data-testid="link-dash-profile">
                        <i class="fa fa-user-pen w-4 text-center text-indigo-500"></i> {{ _('Edit Profile') }}
                    </a>
                    <a href="{{ full_url('/account/2fa') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-purple-400 {% if active_page == '2fa' %}bg-purple-50 dark:bg-purple-900/20 border-purple-500 text-purple-700 dark:text-purple-400{% endif %}" data-testid="link-dash-2fa">
                        <i class="fa fa-shield-halved w-4 text-center text-purple-500"></i>
                        {{ _('Two-Factor Auth') }}
                    </a>
                    <a href="{{ full_url('/dashboard/notifications') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-cyan-400 {% if active_page == 'notifications' %}bg-cyan-50 dark:bg-cyan-900/20 border-cyan-500 text-cyan-700 dark:text-cyan-400{% endif %}" data-testid="link-dash-notifications">
                        <i class="fa fa-bell w-4 text-center text-cyan-500"></i> {{ _('Email Alerts') }}
                    </a>
                    <a href="{{ full_url('/dashboard/security') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-rose-400 {% if active_page == 'security' %}bg-rose-50 dark:bg-rose-900/20 border-rose-500 text-rose-700 dark:text-rose-400{% endif %}" data-testid="link-dash-security">
                        <i class="fa fa-shield-halved w-4 text-center text-rose-500"></i> {{ _('Security') }}
                    </a>
                    <a href="{{ full_url('/dashboard/deletion-history') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-red-400 {% if active_page == 'deletion-history' %}bg-red-50 dark:bg-red-900/20 border-red-500 text-red-700 dark:text-red-400{% endif %}" data-testid="link-dash-deletion-history">
                        <i class="fa fa-trash-clock w-4 text-center text-red-500"></i> {{ _('Deletion History') }}
                    </a>

                    <a href="{{ full_url('/dashboard/api-keys') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-violet-400 {% if active_page == 'api_keys' %}bg-violet-50 dark:bg-violet-900/20 border-violet-500 text-violet-700 dark:text-violet-400{% endif %}" data-testid="link-dash-api-keys">
                        <i class="fa fa-key w-4 text-center text-violet-500"></i> {{ _('API Keys') }}
                        {% if not (plan and plan.api_enabled) %}<span class="ml-auto text-[9px] px-1.5 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400 font-bold uppercase">{{ _('Upgrade') }}</span>{% endif %}
                    </a>

                    {% if plan and plan.price_monthly > 0 %}
                    <div class="px-3 py-2 mt-1">
                        <span class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Content') }}</span>
                    </div>
                    <a href="{{ full_url('/dashboard/blogs') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-orange-400 {% if active_page == 'blogs' %}bg-orange-50 dark:bg-orange-900/20 border-orange-500 text-orange-700 dark:text-orange-400{% endif %}" data-testid="link-dash-blogs">
                        <i class="fa fa-blog w-4 text-center text-orange-500"></i> {{ _('My Blog Posts') }}
                    </a>
                    {% endif %}

                    <div class="px-3 py-2 mt-1 border-t border-gray-100 dark:border-gray-800">
                        <span class="text-[10px] font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest">{{ _('Subscription') }}</span>
                    </div>
                    {% if plan and plan.price_monthly == 0 %}
                    <a href="{{ full_url('/pricing') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-semibold text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-all border-l-2 border-transparent hover:border-indigo-500" data-testid="link-dash-upgrade">
                        <i class="fa fa-arrow-up w-4 text-center text-indigo-500"></i> {{ _('Upgrade Plan') }}
                    </a>
                    {% else %}
                    <a href="{{ full_url('/pricing') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-indigo-400" data-testid="link-dash-plans">
                        <i class="fa fa-credit-card w-4 text-center text-indigo-500"></i> {{ _('Plans & Billing') }}
                    </a>
                    {% endif %}
                    <a href="{{ full_url('/dashboard/billing') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all border-l-2 border-transparent hover:border-emerald-400 {% if active_page == 'billing' %}bg-emerald-50 dark:bg-emerald-900/20 border-emerald-500 text-emerald-700 dark:text-emerald-400{% endif %}" data-testid="link-dash-billing">
                        <i class="fa fa-file-invoice-dollar w-4 text-center text-emerald-500"></i> {{ _('Invoices') }}
                    </a>

                    <div class="border-t border-gray-100 dark:border-gray-800 mt-1 pt-1">
                        <a href="{{ full_url('/logout') }}" class="dash-link flex items-center gap-2.5 px-4 py-2.5 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all" data-testid="link-dash-logout">
                            <i class="fa fa-right-from-bracket w-4 text-center"></i> {{ _('Sign Out') }}
                        </a>
                    </div>
                </nav>
            </div>
        </aside>

        <!-- Main content -->
        <div class="flex-1 min-w-0">
            {% 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 %}

            {% block dashboard_content %}{% endblock %}
        </div>
    </div>
</div>
{% endblock %}