<aside class="sidebar" data-sidebar>

<style>
/* ===== SIDEBAR CONTAINER ===== */
.sidebar {
    height: 100vh;
    overflow-y: auto;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

/* ===== LOGO HEADER ===== */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px 20px 8px;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.sidebar-logo {
    max-width: 140px;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.sidebar-logo:hover {
    transform: scale(1.05);
}

/* ===== NAVIGATION SECTION ===== */
.sidebar-nav {
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-nav-group {
    margin-bottom: 12px;
}

.sidebar-nav-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #94a3b8;
    padding: 12px 16px 6px;
    display: block;
}

/* ===== NAV LINKS ===== */
.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 2px 0;
    border-radius: 10px;
    color: #475569;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}

.nav-link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.nav-link.active {
    background: #e0f2fe;
    color: #0f2b3d;
    font-weight: 700;
    border-left: 3px solid #2c7da0;
    padding-left: 13px;
}

/* ===== FOOTER INFO ===== */
.sidebar-footer {
    padding: 16px 12px 0;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
    margin-top: 8px;
}

.sidebar-footer-text {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .sidebar-logo {
        max-width: 120px;
    }
}
</style>

<!-- LOGO HEADER -->
<div class="sidebar-header">
    <img src="/admin/static/imtma_logo.png" alt="Admin Logo" class="sidebar-logo" title="Event Photo Delivery Admin">
</div>

<!-- NAVIGATION -->
<nav class="sidebar-nav">
    <!-- Main Section -->
    <div class="sidebar-nav-group">
        <span class="sidebar-nav-title">Main</span>
        <a href="{{ url_for('admin.dashboard_page') }}" class="nav-link {% if request.endpoint == 'admin.dashboard_page' %}active{% endif %}">
            📊 Dashboard
        </a>
    </div>

    <!-- Management Section -->
    <div class="sidebar-nav-group">
        <span class="sidebar-nav-title">Management</span>
        {% if session.get('admin_role') == 'admin' %}
        <a href="{{ url_for('admin.event_config_page') }}" class="nav-link {% if request.endpoint == 'admin.event_config_page' %}active{% endif %}">
            ⚙️ Event Config
        </a>
        {% endif %}
        <a href="{{ url_for('admin.visitors_page') }}" class="nav-link {% if request.endpoint == 'admin.visitors_page' or request.endpoint == 'admin.edit_visitor' %}active{% endif %}">
            👥 Visitors
        </a>
        {% if session.get('admin_role') == 'admin' %}
        <a href="{{ url_for('admin.users_list') }}" class="nav-link {% if request.endpoint == 'admin.users_list' %}active{% endif %}">
            🔐 User Credentials
        </a>
        {% endif %}
        <a href="{{ url_for('admin.consent_page') }}" class="nav-link {% if request.endpoint == 'admin.consent_page' %}active{% endif %}">
            📋 Consent
        </a>
    </div>

    {% if session.get('admin_role') == 'admin' %}
    <!-- Content Section -->
    <div class="sidebar-nav-group">
        <span class="sidebar-nav-title">Content</span>
        <a href="{{ url_for('admin.banners_page') }}" class="nav-link {% if request.endpoint == 'admin.banners_page' or request.endpoint == 'admin.upload_banner' %}active{% endif %}">
            🖼️ Banners
        </a>
        <a href="{{ url_for('admin.emails_page') }}" class="nav-link {% if request.endpoint == 'admin.emails_page' %}active{% endif %}">
            📧 New Emails
        </a>
    </div>

    <!-- Operations Section -->
    <div class="sidebar-nav-group">
        <span class="sidebar-nav-title">Operations</span>
        <a href="{{ url_for('admin.trigger_page') }}" class="nav-link {% if request.endpoint == 'admin.trigger_page' %}active{% endif %}">
            ⚡ Trigger
        </a>
        <a href="{{ url_for('admin.day_events_page') }}" class="nav-link {% if request.endpoint == 'admin.day_events_page' %}active{% endif %}">
            📅 Day Events
        </a>
        <a href="{{ url_for('admin.matched_images_page') }}" class="nav-link {% if request.endpoint == 'admin.matched_images_page' %}active{% endif %}">
            🖼️ Matched Images
        </a>
    </div>

    <!-- Camera Man Section -->
    <div class="sidebar-nav-group">
        <span class="sidebar-nav-title">Camera Man</span>
        <a href="{{ url_for('main.upload_page') }}" class="nav-link {% if request.endpoint == 'main.upload_page' %}active{% endif %}">
            ⬆️ Upload Photos
        </a>
        <a href="{{ url_for('admin.uploaded_images_page') }}" class="nav-link {% if request.endpoint == 'admin.uploaded_images_page' %}active{% endif %}">
            🗂️ Uploaded Images
        </a>
    </div>
    {% endif %}
</nav>

<!-- FOOTER -->
<div class="sidebar-footer">
    <p class="sidebar-footer-text">Admin Panel v2.0</p>
</div>

</aside>