<div class="slot">
  <div class="metadata">
    <div class="speakers">
      {% for speaker in slot.speakers %}
      <div class="speaker">
        {{speaker.name | title}}
        <i class="speaker_details fa-solid fa-user"></i>
        {% 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 %}
      </div><br>
      {% endfor %}
    </div>
    <div class="slot_info_buttons">
      <i class="button slot_tooltip black {{slot.submission_type.fr | toicon }}">
        <span class="slot_tooltiptext thin">
          {{slot.submission_type.fr}}
        </span>
      </i>
      <div class="slot_info">
        <i class="button slot_info_details black fa-solid fa-circle-info"></i>
        <div class="details thin">
          <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>
        </div>
      </div>
    </div>
  </div>
  <div class="data">
    <div class="details">
      <div class="title black">{{slot.title}}</div>
      <div class="room"><i class="fa-solid fa-caret-right"></i> {{slot.slot.room.fr}}</div>
      <div class="start"><i class="fa-solid fa-caret-right"></i> {{slot.slot.start | date2dmyhm}} - {{slot.duration}} minutes ({{slot.content_locale | capitalize}})</div>
    </div>
  </div>
</div>