{% 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 %}