{% extends "base.html" %}
{% block headers %}
  <link rel="stylesheet"
        href="{{ url_for('static', filename='css/planning.css') }}">
{% endblock %}
{% block content %}
<div id="main_wrapper">
  <div id="#schedule">
    {% for slot in slots %}
    <div class="slot">
      <div class="metadata">
        <i class="button planning_tooltip black {{slot['submission_type']['fr'] | toicon }}"
           title="{{slot['submission_type']['fr']}}"
           alt="{{slot['submission_type']['fr']}}">
           <span class="planning_tooltiptext thin">{{slot['submission_type']['fr']}}</span><span class="title white">{{slot["title"]}}</span>
        </i>
        <div class="speakers">
          {% for speaker in slot["speakers"] %}
          {{speaker["name"] | title}}
          <i class="speaker_details fa-solid fa-user">
            {% if speaker['avatar'] or speaker["biography"] %}
            <div class="details">
              {% if speaker['avatar'] %}
              <img src="{{speaker['avatar']}}" />
              {% endif %}
              {% if speaker['biography'] %}
              <p class="thin">{{speaker["biography"]}}</p>
              {% endif %}
            </div>
            {% endif %}
          </i> {{ ", " if not loop.last else "" }}
          {% endfor %}
        </div>
      </div>
      <div class="data">
        <div class="details">
          <div class="room">{{slot["slot"]["room"]["fr"]}}</div>
          <div class="start">{{slot["slot"]["start"] | date2dmyhm}} - {{slot["duration"]}} minutes ({{slot["content_locale"] | capitalize}})</div>
        </div>
        <div class="abstract">
          {% if slot['image'] %}
          <img class="data_img" src="{{slot['image']}}"/>
          {% endif %}
          <p>{{slot["abstract"]}}</p>
        </div>
        <div class="description">{{slot["description"]}}</div>
        {% if slot["resources"] %}
        <div class="resources">
          <h3>Ressources</h3>
          {% for resource in slot["resources"] %}
          <div class="resource">
            <a class="thin" href="{{resource['resource']}}">{{resource["description"]}}</a>
          </div>
          {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}
{% block navbar %}
  <div id="navbar_wrapper">
    <i class="button tooltip black fa-solid fa-house"
      title="Accueil"
      alt="Accueil"
      onclick="document.location='/'">
      <span class="tooltiptext thin">Accueil</span>
    </i>
    <i class="button tooltip black fa-solid fa-map-location-dot"
      title="Le Lieu"
      alt="Le Lieu">
      <span class="tooltiptext thin">Le lieu</span>
    </i>
    <i class="button tooltip black fa-solid fa-burger"
      title="Restauration"
      alt="Restauration">
      <span class="tooltiptext thin">Restauration</span>
    </i>
    <i class="button tooltip black fa-solid fa-shirt"
      title="T-shirt et goodies"
      alt="T-shirt et goodies">
      <span class="tooltiptext thin">Goodies</span>
    </i>
    <i class="button tooltip black fa-solid fa-guitar"
      title="Concerts et DJ sets"
      alt="Concerts et DJ sets">
      <span class="tooltiptext thin">Concerts et DJ sets</span>
    </i>
    <i class="button tooltip black fa-solid fa-screwdriver-wrench"
      title="Ateliers"
      alt="Ateliers">
      <span class="tooltiptext thin">Ateliers</span>
    </i>
    <i class="button tooltip black fa-solid fa-film"
      title="Projections"
      alt="Projections">
      <span class="tooltiptext thin">Projections</span>
    </i>
    <i class="button tooltip black fa-solid fa-users-line"
      title="Tables rondes"
      alt="Tables rondes">
      <span class="tooltiptext thin">Tables rondes</span>
    </i>
    <i class="button tooltip black fa-solid fa-palette"
      title="Expositions"
      alt="Expositions">
      <span class="tooltiptext thin">Expositions</span>
    </i>
    <i class="button tooltip black fa-solid fa-person-chalkboard"
      title="Présentation"
      alt="Présentation">
      <span class="tooltiptext thin">Présentation</span>
    </i>
  </div>
{% enblock %}