<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>UniSquat</title>
    <link rel="stylesheet" type="text/css" href="../static/style.css">
    <meta name="viewport" content="width=300, initial-scale=1" />
  </head>
  <body>
    {% include "base.html" %}
    <main>
    Départements sélectionnés :
    <b>{{ depts_str }}</b>
    <form class="flex" action="/app/date-select" method="get">
      {% for d in dident_list : %}
        <span style="display: none;"><input type="text" name="dept" value="{{ d }}"/></span>
      {% endfor %}
      <input type="submit" value="Choisir une date"/>
    </form>
    <div class="flex">
      <button onClick="location.href='/app'" type="button">Choisir des départements</button>
    </div>
    <h1>Disponibles maintenant</h1>
    <div class="flex-container">
      <ul>
      {% for room in free_rooms : %}
      {% if room.is_free : %}
        <dt>{{ room.name }}
      {% if not(room.end.hour == 23 and room.end.minute == 59 and room.end.second == 59) : %}
        <br><span class=details>Jusqu'à {{ frooms_disp[room.name]["end"] }} (dans {{ frooms_disp[room.name]["rtime"] }})</span>
      {% endif %}
        </dt>
      {% endif %}
      {% endfor %}
      </ul>
    </div>
    <br>
    <h1>Disponibles prochainement</h1>
    <div class="flex-container">
      <ul>
      {% for room in free_rooms : %}
      {% if not room.is_free : %}
        <dt>{{ room.name }}
      {% if room.end.hour == 23 and room.end.minute == 59 and room.end.second == 59 : %}
        <br><span class=details>À {{ frooms_disp[room.name]["start"] }} (dans {{ frooms_disp[room.name]["rtime"] }})</span>
      {% else %}
        <br><span class=details>De {{ frooms_disp[room.name]["start"] }} à {{ frooms_disp[room.name]["end"] }} (dans {{ frooms_disp[room.name]["rtime"] }})</span>
      {% endif %}
        </dt>
      {% endif %}
      {% endfor %}
      </ul>
    </div>
    </main>
	{% include "footer.html" %}
  </body>
</html>