@props(['activePage'])

<aside
  class="sidenav navbar navbar-vertical navbar-expand-xs border-radius-xl fixed-start bg-gradient-dark my-3 ms-3 border-0"
  id="sidenav-main"
>

  <div class="sidenav-header">
    <i
      class="fas fa-times position-absolute d-none d-xl-none end-0 top-0 cursor-pointer p-3 text-white opacity-5"
      id="iconSidenav"
      aria-hidden="true"
    ></i>

    <a
      class="navbar-brand d-flex text-wrap align-items-center m-0"
      href=" {{ route('dashboard') }} "
    >
      <img
        class="navbar-brand-img h-100"
        src="{{ asset('assets') }}/img/logo-ct.png"
        alt="main_logo"
      >
      <span class="font-weight-bold ms-2 text-white">
        management panel
      </span>
    </a>
  </div>

  <hr class="horizontal light mb-2 mt-0">

  <div
    class="navbar-collapse max-height-vh-100 collapse w-auto"
    id="sidenav-collapse-main"
  >
    <ul class="navbar-nav">
      <li class="nav-item mt-3">
        <h6
          class="text-uppercase font-weight-bolder opacity-8 ms-2 ps-4 text-xs text-white"
        >
          Pages
        </h6>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'students' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('students.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">
              table_view
            </i>
          </div>
          <span class="nav-link-text ms-1">
            Students info
          </span>

        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'teachers' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('teachers.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">Teachers</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'subjects' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('subjects.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">
            Subjects
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'classrooms' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('classrooms.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">
            Class rooms
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'schedules' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('schedules.index') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">
            Schedules
          </span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'tables' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('tables') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">table_view</i>
          </div>
          <span class="nav-link-text ms-1">
            Tables
          </span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'billing' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('billing') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">receipt_long</i>
          </div>
          <span class="nav-link-text ms-1">Billing</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'virtual-reality' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('virtual-reality') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">view_in_ar</i>
          </div>
          <span class="nav-link-text ms-1">Virtual Reality</span>
        </a>
      </li>

      <li
        class="nav-item"
        style="display: none;"
      >
        <a
          class="nav-link {{ $activePage == 'rtl' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('rtl') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">format_textdirection_r_to_l</i>
          </div>
          <span class="nav-link-text ms-1">RTL</span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'notifications' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('notifications') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">notifications</i>
          </div>
          <span class="nav-link-text ms-1">
            Notifications
          </span>
        </a>
      </li>

      <li class="nav-item mt-3">
        <h6
          class="text-uppercase font-weight-bolder opacity-8 ms-2 ps-4 text-xs text-white"
        >
          Account pages
        </h6>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'profile' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('profile') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">person</i>
          </div>
          <span class="nav-link-text ms-1">
            Profile
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link text-white"
          href="{{ route('static-sign-in') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">login</i>
          </div>
          <span class="nav-link-text ms-1">
            Sign In
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link text-white"
          href="{{ route('static-sign-up') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">assignment</i>
          </div>
          <span class="nav-link-text ms-1">
            Sign Up
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'dashboard' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('dashboard') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i class="material-icons opacity-10">dashboard</i>
          </div>
          <span class="nav-link-text ms-1">
            Dashboard
          </span>
        </a>
      </li>

      <!-- original -->
      <li class="nav-item mt-3">
        <h6
          class="text-uppercase font-weight-bolder opacity-8 ms-2 ps-4 text-xs text-white"
        >
          Laravel examples</h6>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'user-profile' ? 'active bg-gradient-primary' : '' }} text-white"
          href="{{ route('user-profile') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i
              class="fas fa-user-circle pe-2 ps-2 text-center"
              style="font-size: 1.2rem;"
            ></i>
          </div>
          <span class="nav-link-text ms-1">
            User Profile
          </span>
        </a>
      </li>

      <li class="nav-item">
        <a
          class="nav-link {{ $activePage == 'user-management' ? ' active bg-gradient-primary' : '' }} text-white"
          href="{{ route('user-management') }}"
        >
          <div
            class="d-flex align-items-center justify-content-center me-2 text-center text-white"
          >
            <i
              class="fas fa-lg fa-list-ul pe-2 ps-2 text-center"
              style="font-size: 1rem;"
            ></i>
          </div>
          <span class="nav-link-text ms-1">
            User Management
          </span>
        </a>
      </li>
      <!-- original -->

    </ul>
  </div>
  <div class="sidenav-footer position-absolute w-100 bottom-0">

    <div class="mx-3">
      <a
        class="btn bg-gradient-primary w-100"
        href="../../documentation/getting-started/installation.html"
        target="_blank"
      >
        View documentation
      </a>
    </div>

    <div class="mx-3">
      <a
        class="btn bg-gradient-primary w-100"
        type="button"
        href="//www.vtc.edu.hk"
        target="_blank"
      >
        <i class="material-icons">link</i> FYP
      </a>
    </div>
  </div>
</aside>
