<aside class="sidebar" id="sidebar">

    <!-- BRAND -->
    <a class="sidebar-brand" href="index.php">

        <span class="sidebar-brand__logo">

            <img src="../assets/img/logo.webp" alt="">

        </span>

        <span class="sidebar-brand__text">

            <span class="sidebar-brand__name">
                Trail Run
            </span>

            <span class="sidebar-brand__sub">
                Admin Panel
            </span>

        </span>

    </a>

    <!-- NAVIGATION -->
    <nav class="sidebar-nav">

        <span class="sidebar-label">
            <?php echo tr('Menu','Menu'); ?>
        </span>

        <!-- Dashboard -->
        <a href="index.php"
           class="sidebar-link <?php echo ($page === 'dashboard') ? 'active' : ''; ?>">

            <svg viewBox="0 0 24 24">
                <rect x="3" y="3" width="7" height="7" rx="1"/>
                <rect x="14" y="3" width="7" height="7" rx="1"/>
                <rect x="3" y="14" width="7" height="7" rx="1"/>
                <rect x="14" y="14" width="7" height="7" rx="1"/>
            </svg>

            <?php echo tr('Dashboard','Dashboard'); ?>

        </a>

        <!-- Participants -->
        <a href="index.php?page=participants"
           class="sidebar-link <?php echo ($page === 'participants') ? 'active' : ''; ?>">

            <svg viewBox="0 0 24 24">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>

            <?php echo tr('Participants','Peserta'); ?>

        </a>

        <!-- Verified List -->
        <a href="index.php?page=verified_list"
           class="sidebar-link <?php echo ($page === 'verified_list') ? 'active' : ''; ?>">

            <svg viewBox="0 0 24 24">
                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                <polyline points="22 4 12 14.01 9 11.01"/>
            </svg>

            <?php echo tr('Verified List','Daftar Terverifikasi'); ?>

        </a>

        <a href="index.php?page=racepack"
           class="sidebar-link <?php echo ($page === 'racepack') ? 'active' : ''; ?>">

            <svg viewBox="0 0 24 24">
                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
            </svg>

            Race Pack

        </a>
        <!-- RFID -->
    <a href="index.php?page=rfid"
    class="sidebar-link <?php echo ($page === 'rfid') ? 'active' : ''; ?>">

        <svg viewBox="0 0 24 24">
            <path d="M4 4h2v2H4z"/>
            <path d="M8 4h2v2H8z"/>
            <path d="M4 8h2v2H4z"/>
            <path d="M18 4h2v2h-2z"/>
            <path d="M14 4h2v2h-2z"/>
            <path d="M18 8h2v2h-2z"/>
            <path d="M4 18h2v2H4z"/>
            <path d="M8 18h2v2H8z"/>
            <path d="M4 14h2v2H4z"/>
            <path d="M18 18h2v2h-2z"/>
            <path d="M14 18h2v2h-2z"/>
            <path d="M18 14h2v2h-2z"/>
        </svg>

        RFID

    </a>

    </nav>

    <!-- FOOTER -->
    <div class="sidebar-footer">

        <a href="logout.php"
           class="sidebar-link sidebar-link--logout">

            <svg viewBox="0 0 24 24">
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                <polyline points="16 17 21 12 16 7"/>
                <line x1="21" y1="12" x2="9" y2="12"/>
            </svg>

            <?php echo tr('Logout','Keluar'); ?>

        </a>

    </div>

</aside>