<aside class="sidebar" :class="{ 'open': $store.sidebar?.open }" x-data>

    <!-- Main -->
    <div class="sidebar-section">
        <div class="sidebar-label">Navigation</div>
        <a class="sidebar-link {{ 'active' if active_page == 'gateways' }}"
           href="/gateways">
            <i class="bi bi-hdd-network"></i> Gateways
        </a>
        <a class="sidebar-link {{ 'active' if active_page == 'policies' }}"
           href="/policies">
            <i class="bi bi-shield-lock"></i> Policies
        </a>
    </div>

    <!-- Admin (only for admin role) -->
    <div class="sidebar-section" x-show="$store.auth.hasRole('admin')" x-cloak>
        <div class="sidebar-label">Admin</div>
        <a class="sidebar-link {{ 'active' if active_page == 'audit' }}"
           href="/audit">
            <i class="bi bi-journal-text"></i> Audit Log
        </a>
        <a class="sidebar-link {{ 'active' if active_page == 'users' }}"
           href="/users">
            <i class="bi bi-people"></i> Users
        </a>
    </div>

    <!-- Theme toggle + Gateway health (bottom) -->
    <div class="sidebar-section mt-auto">
        <button class="sidebar-link" style="border: none; background: none; width: 100%; cursor: pointer;"
                @click="$store.theme.toggle()">
            <i class="bi" :class="$store.theme.mode === 'dark' ? 'bi-sun' : 'bi-moon'"></i>
            <span x-text="$store.theme.mode === 'dark' ? 'Light Mode' : 'Dark Mode'"></span>
        </button>
    </div>
    <div class="sidebar-section" x-show="GW" x-cloak>
        <div class="sidebar-health"
             :class="{
                 'text-success': $store.health.connected,
                 'text-danger': !$store.health.connected && $store.health.status !== 'unknown',
                 'text-muted': $store.health.status === 'unknown'
             }">
            <i class="bi bi-circle-fill"></i>
            <span x-text="$store.health.connected
                ? ($store.health.version || 'Connected')
                : ($store.health.status === 'degraded' ? 'Degraded' : 'Disconnected')">
            </span>
        </div>
    </div>

</aside>
