{{ define "components/navbar.html" }}

<nav class="navbar navbar-expand-lg navbar-dark bg-success shadow-sm">
  <div class="container">

    <a
      class="navbar-brand d-flex align-items-center gap-2 fw-bold"
      href="/"
    >
      <img
        src="/static/images/logo.png"
        alt="Logo"
        width="38"
        height="38"
        style="object-fit: contain"
      >

      Raport Tahsin & Tahfidz
    </a>

    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarUtama"
      aria-controls="navbarUtama"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>

    <div
      class="collapse navbar-collapse"
      id="navbarUtama"
    >

      <ul class="navbar-nav ms-auto align-items-lg-center">

        <li class="nav-item">
          <a
            class="nav-link"
            href="/"
          >
            Dashboard
          </a>
        </li>

        <li class="nav-item">
          <a
            class="nav-link"
            href="/siswa"
          >
            Data Siswa
          </a>
        </li>
        <li class="nav-item">
  <a
    href="/rekap"
    class="nav-link"
  >
    Rekap Nilai
  </a>
</li>

        {{ if eq .roleLogin "admin" }}

        <li class="nav-item">
          <a
            class="nav-link"
            href="/materi-hafalan"
          >
            Materi Hafalan
          </a>
        </li>

        <li class="nav-item">
          <a
            class="nav-link"
            href="/materi-tahsin"
          >
            Materi Tahsin
          </a>
        </li>

        <li class="nav-item">
          <a
            class="nav-link"
            href="/users"
          >
            User
          </a>
        </li>

        {{ end }}

        <li class="nav-item dropdown ms-lg-3">

          <a
            class="nav-link dropdown-toggle"
            href="#"
            role="button"
            data-bs-toggle="dropdown"
          >
            {{ .namaLogin }}
          </a>

          <ul class="dropdown-menu dropdown-menu-end">

            <li>
              <span class="dropdown-item-text small text-muted">
                Role:
                {{ if eq .roleLogin "admin" }}
                  Admin
                {{ else }}
                  Guru
                {{ end }}
              </span>
            </li>

            <li>
              <hr class="dropdown-divider">
            </li>

            <li class="px-3">

              <form
                action="/logout"
                method="POST"
              >

                <button
                  type="submit"
                  class="btn btn-danger btn-sm w-100"
                >
                  Logout
                </button>

              </form>

            </li>

          </ul>

        </li>

      </ul>

    </div>

  </div>
</nav>

{{ end }}