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

    <!-- Main script -->
    <script type="module" src="/assets/javascripts/main/user/index.js"></script>
    <!-- Firebase Auth -->
    <script
      type="module"
      src="/assets/javascripts/firebase/auth/login.js"
    ></script>
  </head>

  <body>
    <%- include('partials/user/_header', { in_section: 'login' }) %>

    <banner class="parallax-container text-light">
      <img
        src="/assets/images/banners/pexels-goumbik-590041.jpg"
        class="parallax"
        alt="Banner"
      />
      <div class="container text-light text-start">
        <p class="subtitle-heading">EDCA</p>
        <h1>Evaluación de Calidad Académica</h1>
      </div>
    </banner>
    <main class="container">
      <section class="vstack gap-3 section-margin-top section-margin-bottom">
        <div class="g-col-12">
          <h2>Ingresar a EDCA</h2>
        </div>
        <div class="g-col-12">
          <div class="row g-3">
            <p
              name="error-message"
              class="text-danger bold mt-2 <%= errorMessage ? '' : 'd-none' %>"
            >
              <iconify-icon
                class="me-2"
                icon="mdi:alert-circle"
                width="18"
                height="18"
              ></iconify-icon>
              <%= errorMessage ? errorMessage : '...' %>
            </p>
            <% if (accesos.alumno || accesos.trabajador) { %>
            <div class="col-md-5">
              <p class="text-uppercase small-bold">
                <iconify-icon
                  class="me-2"
                  icon="material-symbols:school-rounded"
                  width="18"
                  height="18"
                ></iconify-icon>
                Soy miembro de la comunidad
              </p>
              <button id="user-login-btn" class="google-sign-in w-100">
                <iconify-icon
                  class="me-2"
                  icon="devicon:google"
                  width="18"
                  height="18"
                ></iconify-icon>
                Iniciar sesión con Google
              </button>
            </div>
            <% } if ((accesos.alumno || accesos.trabajador) && accesos.padre) {
            %>
            <div
              class="col-md-2 d-flex align-items-center justify-content-center"
            >
              <div class="text-center text-muted">&mdash; o &mdash;</div>
            </div>
            <% } if (accesos.padre) { %>
            <div class="col-md-5">
              <p class="text-uppercase small-bold">
                <iconify-icon
                  class="me-2"
                  icon="material-symbols:family-restroom-rounded"
                  width="18"
                  height="18"
                ></iconify-icon>
                Soy padre de familia o tutor
              </p>
              <button id="tutor-login-btn" class="medium-button w-100">
                <iconify-icon
                  class="me-2"
                  icon="material-symbols:login-rounded"
                  width="18"
                  height="18"
                ></iconify-icon>
                Iniciar sesión
              </button>
            </div>
            <% } if (!accesos.alumno && !accesos.trabajador && !accesos.padre) {
            %>
            <div class="col-12">
              <div class="alert alert-danger" role="alert">
                <iconify-icon
                  class="me-2"
                  icon="mdi:alert-circle"
                  width="18"
                  height="18"
                ></iconify-icon>
                Por el momento, las evaluaciones están desactivadas.
              </div>
            </div>
            <% } %>
          </div>
        </div>
      </section>
    </main>

    <%- include('partials/user/_footer') %>
  </body>
</html>
