{% extends "base.html" %} {% block title %}Orario Scolastico{% endblock %} {%
block head %}
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script src="/static/index.js" defer></script>
<style>
  @media (max-width: 1279px) {
    table thead tr {
      display: none;
    }

    table td {
      display: block;
    }

    table tr {
      counter-set: column;
    }

    table tr td {
      counter-increment: column;
    }

    table td::before {
      content: counter(column) " ora: ";
    }
  }

  #table-title {
    text-align: center;
  }
</style>
{% endblock %} {%block content %}
<noscript>
  <h1>Per utilizzare questa applicazione è necessario abilitare JavaScript.</h1>
</noscript>
<div id="forms" hidden>
  <form id="form-pdf">
    <fieldset>
      <label id="pdf-label" aria-busy="true">Seleziona il calendario</label>
      <select id="pdf" onchange="select_pdf()" required>
        <option selected disabled value="none">Seleziona un'opzione</option>
      </select>
    </fieldset>
  </form>
  <form id="form-type" hidden>
    <formfield>
      <label>Seleziona cosa visualizzare</label>
      <select id="type" onchange="select_type()">
        <option selected disabled value="none">Seleziona un'opzione</option>
        <option value="teacher">Orario docente</option>
        <option value="student">Orario classe</option>
      </select>
    </formfield>
  </form>
  <form id="form-teacher" onsubmit="return select_teacher()" hidden>
    <formfield>
      <label id="teacher-label" aria-busy="true">Seleziona docente</label>
      <input
        id="teacher"
        type="text"
        oninput="filter_teachers()"
        placeholder="Filtra"
      />
      <select id="teachers"></select>
    </formfield>
    <input type="submit" value="Continua" />
  </form>
  <form id="form-classes" hidden>
    <formfield>
      <label id="class-label" aria-busy="true">Seleziona la tua classe</label>
      <select id="year" onchange="load_section()">
        <option selected disabled value="none">Seleziona l'anno</option>
      </select>
      <select id="section" onchange="load_major()">
        <option selected disabled value="none">Seleziona la sezione</option>
      </select>
      <select id="major" onchange="select_class()">
        <option selected disabled value="none">Seleziona l'indirizzo</option>
      </select>
      <input type="submit" value="Continua" />
    </formfield>
  </form>
</div>
<div id="dashboard" hidden>
  <h1 id="table-title"></h1>
  <table id="table" class="striped" aria-busy="true"></table>
  <form>
    <input type="submit" onclick="delete_cookies()" value="Reimposta" />
  </form>
</div>
<dialog id="error-dialog">
  <p id="error">Errore: non è stato possibile caricare l'orario.</p>
</dialog>
{% endblock %}