<nav class="sidebar sidebar-offcanvas" id="sidebar">
    <ul class="nav">

        <!-- Dashboard (COMMON) -->
        <li class="nav-item">
            <a class="nav-link active" href="#">
                <i class="mdi mdi-home menu-icon"></i>
                <span class="menu-title">Dashboard</span>
            </a>
        </li>

        {{-- ================= SUPER ADMIN ================= --}}
        @role('super_admin')

        <!-- Principals -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#principals-menu">
                <i class="mdi mdi-account-tie menu-icon"></i>
                <span class="menu-title">Principals</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="principals-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Principals</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pending Approval</a></li>
                </ul>
            </div>
        </li>

        <!-- Teachers -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#teachers-menu">
                <i class="mdi mdi-account-group menu-icon"></i>
                <span class="menu-title">Teachers</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="teachers-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Teachers</a></li>
                </ul>
            </div>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#jobs-menu">
                <i class="mdi mdi-briefcase menu-icon"></i>
                <span class="menu-title">Jobs</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="jobs-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">All Jobs</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pending Jobs</a></li>
                </ul>
            </div>
        </li>

        <!-- Applications -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-file-document menu-icon"></i>
                <span class="menu-title">Applications</span>
            </a>
        </li>

        <!-- Subscriptions -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#finance-menu">
                <i class="mdi mdi-currency-usd menu-icon"></i>
                <span class="menu-title">Subscriptions</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="finance-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">Plans</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Payments</a></li>
                </ul>
            </div>
        </li>

        <!-- Settings -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-cog menu-icon"></i>
                <span class="menu-title">Settings</span>
            </a>
        </li>

        @endrole


        {{-- ================= PRINCIPAL ================= --}}
        @role('principal')

        <!-- School Profile -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-domain menu-icon"></i>
                <span class="menu-title">School Profile</span>
            </a>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" data-bs-toggle="collapse" href="#principal-jobs-menu">
                <i class="mdi mdi-briefcase menu-icon"></i>
                <span class="menu-title">Jobs</span>
                <i class="mdi mdi-chevron-down menu-arrow"></i>
            </a>
            <div class="collapse" id="principal-jobs-menu">
                <ul class="nav flex-column sub-menu">
                    <li class="nav-item"><a class="nav-link" href="#">Post Job</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">My Jobs</a></li>
                </ul>
            </div>
        </li>

        <!-- Applications -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-account-search menu-icon"></i>
                <span class="menu-title">Applications</span>
            </a>
        </li>

        <!-- Subscription -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-currency-usd menu-icon"></i>
                <span class="menu-title">Subscription</span>
            </a>
        </li>

        @endrole


        {{-- ================= TEACHER ================= --}}
        @role('teacher')

        <!-- Profile -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-account menu-icon"></i>
                <span class="menu-title">My Profile</span>
            </a>
        </li>

        <!-- Jobs -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-briefcase-search menu-icon"></i>
                <span class="menu-title">Browse Jobs</span>
            </a>
        </li>

        <!-- Applied -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-file-document menu-icon"></i>
                <span class="menu-title">Applied Jobs</span>
            </a>
        </li>

        <!-- Interviews -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-calendar-clock menu-icon"></i>
                <span class="menu-title">Interviews</span>
            </a>
        </li>

        <!-- Hired -->
        <li class="nav-item">
            <a class="nav-link" href="#">
                <i class="mdi mdi-check-circle menu-icon"></i>
                <span class="menu-title">Hired Status</span>
            </a>
        </li>

        @endrole

    </ul>
</nav>