<x-layout bodyClass="g-sidenav-show  bg-gray-200">

  <x-navbars.sidebar_triage
    role="{{ $request->user()->role }}"
    activePage="exam_results"
    teacherId="{{ $current_teacher->id }}"
  >
  </x-navbars.sidebar_triage>

  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >

    <!-- Navbar -->
    <x-navbars.navs.auth
      titlePage="Exam results"
      role="{{ $request->user()->role }}"
      firstName="{{ $current_teacher->firstName }}"
      last_name="{{ $current_teacher->lastName }}"
    >
    </x-navbars.navs.auth>
    <!-- End Navbar -->

    <div class="container-fluid py-4">
      <div
        class="card card-plain h-100"
        style="background-color: white;"
      >
        <div class="card-header p-3 pb-0">
          <div class="row">
            <div class="col-md-8 d-flex align-items-center">
              <h6 class="mb-3">
                This teacher got {{ count($exams) }} exams.
              </h6>
            </div>
          </div>
        </div>

        <div class="card-body pl-3 pr-3">
          <div class="row">
            @foreach ($exams as $exam)
              <div class="col-sm-3 mt-4">
                <div
                  class="bg-light border p-3"
                  style="border-radius: 1rem;"
                >
                  <div style="min-height: 10rem;">
                    <div style="font-size: 1.2rem; ">
                      <span style="font-weight: bold;">Exam:
                      </span>{{ $exam->title }}
                    </div>
                  </div>
                  <div class="mt-2">

                    <a
                      class="btn btn-secondary btn-sm"
                      href="{{ route('teacherShowExamResultsById', [$exam->id]) }}"
                    >
                      <span class="btn-text">update results</span>
                    </a>

                  </div>
                </div>
              </div>
            @endforeach
          </div>
        </div>

      </div>

      <x-footers.auth></x-footers.auth>
    </div>

  </main>

</x-layout>
