{% extends 'base.html' %}
{% import 'web/admin/_macros.html' as admin_macros %}

{% block content %}
<style>
    .admin-shell { min-height: calc(100vh - 72px); background: #f4f6f8; }
    .admin-sidebar {
        background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
        border-right: 1px solid rgba(255,255,255,.06);
        min-height: calc(100vh - 72px);
        width: 100%;
    }
    @media (min-width: 992px) {
        .admin-sidebar { max-width: 280px; flex: 0 0 auto; }
    }
    .admin-sidebar .nav-link {
        color: #94a3b8;
        border-radius: 10px;
        padding: 0.65rem 0.85rem;
        margin-bottom: 4px;
        font-weight: 600;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        transition: color .15s, background .15s;
    }
    .admin-sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
    .admin-sidebar .nav-link.active {
        color: #fff;
        background: rgba(255, 144, 23, .15);
        border-left: 3px solid var(--primary-orange, #ff9017);
        padding-left: calc(0.85rem - 3px);
    }
    .admin-sidebar .sidebar-brand {
        color: #fff;
        font-weight: 800;
        letter-spacing: .02em;
        font-size: 1rem;
        padding: 0.5rem 0.85rem 1rem;
    }
    .admin-main { padding: 1.25rem 1.25rem 2rem; }
    @media (min-width: 992px) {
        .admin-main { padding: 1.5rem 1.75rem 2.5rem; }
    }
    @media (max-width: 991.98px) {
        .admin-sidebar { min-height: auto; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
        .admin-sidebar .nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 0.25rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
        .admin-sidebar .nav-link { white-space: nowrap; margin-bottom: 0; font-size: 0.8rem; padding: 0.5rem 0.65rem; }
        .admin-sidebar .nav-link.active { border-left: none; border-bottom: 2px solid var(--primary-orange, #ff9017); padding-left: 0.65rem; }
        .admin-sidebar .sidebar-brand { padding-bottom: 0.5rem; }
    }
</style>

<div class="admin-shell">
    <div class="container-fluid px-0">
        <div class="row g-0 flex-lg-nowrap">
            <aside class="col-12 col-lg-auto admin-sidebar p-0">
                <div class="p-3 pt-4 pb-2">
                    <div class="sidebar-brand d-flex align-items-center gap-2">
                        <i class="bi bi-shield-lock-fill text-warning"></i>
                        <span>Admin</span>
                    </div>
                    <nav class="nav flex-column">
                        <a class="nav-link {% if admin_section == 'overview' %}active{% endif %}" href="{{ url_for('web.admin_overview') }}">
                            <i class="bi bi-speedometer2"></i> Overview
                        </a>
                        <a class="nav-link {% if admin_section == 'sales' %}active{% endif %}" href="{{ url_for('web.admin_sales') }}">
                            <i class="bi bi-graph-up-arrow"></i> Sales &amp; analytics
                        </a>
                        <a class="nav-link {% if admin_section == 'reports' %}active{% endif %}" href="{{ url_for('web.admin_reports') }}">
                            <i class="bi bi-file-earmark-bar-graph"></i> Reports
                        </a>
                        <a class="nav-link {% if admin_section == 'finance' %}active{% endif %}" href="{{ url_for('web.admin_finance') }}">
                            <i class="bi bi-wallet2"></i> Cash &amp; finance
                        </a>
                        <a class="nav-link {% if admin_section == 'orders' %}active{% endif %}" href="{{ url_for('web.admin_orders') }}">
                            <i class="bi bi-bag-check"></i> Orders
                        </a>
                        <a class="nav-link {% if admin_section == 'customers' %}active{% endif %}" href="{{ url_for('web.admin_customers') }}">
                            <i class="bi bi-people"></i> Online customers
                        </a>
                        <a class="nav-link {% if admin_section == 'inventory' %}active{% endif %}" href="{{ url_for('web.admin_inventory') }}">
                            <i class="bi bi-box-seam"></i> Inventory alerts
                        </a>
                    </nav>
                    <hr class="border-secondary opacity-25 my-3">
                    <a class="nav-link text-white-50 small py-2" href="{{ url_for('web.home') }}">
                        <i class="bi bi-arrow-left"></i> Back to store
                    </a>
                </div>
            </aside>
            <main class="col admin-main flex-grow-1 min-w-0">
                <div class="d-flex flex-wrap justify-content-between align-items-start gap-2 mb-3">
                    <div>
                        <h1 class="h3 fw-bold mb-1">{% block admin_title %}Admin{% endblock %}</h1>
                        <p class="text-muted small mb-0">{% block admin_subtitle %}{% endblock %}</p>
                    </div>
                    <span class="text-muted small">UTC {{ datetime.utcnow().strftime('%d %b %Y %H:%M') }}</span>
                </div>
                {% block admin_content %}{% endblock %}
            </main>
        </div>
    </div>
</div>
{% endblock %}