<!DOCTYPE html>
<html lang="es">
  <head>
    <%- include('partials/user/_head') %>
    <!-- Logout -->

    <script
      type="module"
      src="/assets/javascripts/firebase/auth/logout.js"
    ></script>
  </head>
  <body>
    <%- include('partials/user/_header', { in_section: 'system', item_active:
    'evaluations' }) %>

    <main class="container">
      <section class="vstack gap-3">
        <h1>Evaluaciones pendientes</h1>
        <% if (user.tipoUsuarioAuth === "padre") { %> <% if (!departamentos ||
        departamentos.length === 0) { %>
        <div class="col-md-12">
          <p class="text-center">
            No tienes evaluaciones pendientes en este momento.
          </p>
        </div>
        <% } else { %>
        <div class="alert alert-info" role="alert">
          <iconify-icon
            class="float-start me-2"
            icon="material-symbols:info"
            width="20"
            height="20"
          ></iconify-icon>
          <strong>Atención:</strong> Debes evaluar aquellos
          <strong>departamentos de control escolar</strong> en los que tu
          <strong>hijo está inscrito</strong>. Tu hijo o tus hijos puede estar
          en primaria, secundaria o preparatoria.
        </div>
        <div class="row row-cols-2 row-cols-md-3 g-3">
          <% departamentos.forEach((departamento) => { %>
          <div class="col">
            <div class="card mb-3 text-center shadow">
              <div class="row g-0">
                <div class="col-md-12 col-8 d-flex flex-column">
                  <div
                    class="card-body d-flex flex-column justify-content-center gap-3"
                  >
                    <h5 class="card-title small-bold text-uppercase">
                      Departamento
                    </h5>
                    <h5 class="card-title large-bold">
                      <%= departamento.nombre %>
                    </h5>
                    <button
                      class="small-button w-100"
                      type="button"
                      onclick="location.href='<%= baseUrl + '/sistema/evaluaciones/evaluar/departamento/' + departamento.id %>'"
                    >
                      <iconify-icon
                        class="float-start"
                        icon="healthicons:i-exam-multiple-choice"
                        width="18"
                        height="18"
                      ></iconify-icon>
                      Evaluar
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <% }); %>
        </div>
        <% } %> <% } else { %>
        <div class="col-md-12">
          <p class="text-center">
            No tienes evaluaciones pendientes en este momento.
          </p>
        </div>
        <% } %>
      </section>
    </main>
    <%- include('partials/user/_footer') %>
  </body>
</html>
