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

<div class="bg-light border-bottom">
  <div class="container py-3">

    <div
      class="d-flex flex-wrap justify-content-between align-items-center gap-3"
    >

      <!-- INFORMASI RAPORT -->
      <div>

        <div class="text-muted small mb-1">
          Raport Siswa
        </div>

        <h5 class="fw-bold mb-1">
          {{ .raport.Siswa.Nama }}
        </h5>

        <div class="text-muted small">

          Kelas
          <span class="fw-semibold">
            {{ .raport.Kelas }}
          </span>

          <span class="mx-1">•</span>

          Semester
          <span class="fw-semibold">
            {{ .raport.Semester }}
          </span>

          <span class="mx-1">•</span>

          Tahun Ajaran
          <span class="fw-semibold">
            {{ .raport.TahunAjaran }}
          </span>

        </div>

      </div>

      <!-- MENU RAPORT -->
      <div class="d-flex flex-wrap gap-2">

        <a
          href="/raport/{{ .raport.ID }}/tahfidz"
          class="btn btn-sm btn-outline-success"
        >
          Tahfidz
        </a>

        <a
          href="/raport/{{ .raport.ID }}/tahsin"
          class="btn btn-sm btn-outline-primary"
        >
          Tahsin
        </a>

        <a
          href="/raport/{{ .raport.ID }}/evaluasi"
          class="btn btn-sm btn-outline-dark"
        >
          Evaluasi
        </a>

        <a
          href="/raport/{{ .raport.ID }}/pengesahan"
          class="btn btn-sm btn-outline-secondary"
        >
          Pengesahan
        </a>

        <a
          href="/raport/{{ .raport.ID }}/cetak"
          class="btn btn-sm btn-primary"
        >
          Cetak
        </a>

      </div>

    </div>

  </div>
</div>

{{ end }}