<div class="slot">
  <div class="slot_header">
    <div class="slot_title {{ slot.slot.start | date2dayclass}}"
         onclick="switch_visibility(document.getElementById('{{slot.code}}_{{loop_index}}'))">
      <i class="black {{slot.submission_type.fr | toicon }}"></i>
      <span class="title">{{slot.title}}</span>
    </div>
    <div class="slot_info">
      {% if slot.slot.room.fr != "Workshops" %}
      <div class="start">
        <i class="fa-solid fa-caret-right"></i>
        {{slot.slot.start | date2dmyhm}} - {{slot.duration}} minutes ({{slot.content_locale | capitalize}})
      </div>
      <div class="room">
        <i class="fa-solid fa-caret-right"></i>
        {{slot.slot.room.fr}}
      </div>
      {% endif %}
      <div class="speakers">
        {% for speaker in slot.speakers %}
          <div class="speaker">
            <div class="name" onclick="switch_visibility(document.getElementById('{{speaker.code}}_{{loop_index}}'))">
              <i class="fa-solid fa-user"></i>
              <span>{{speaker.name | title}}</span>
            </div>
            {% if speaker.avatar or speaker.biography %}
            <div id="{{speaker.code}}_{{loop_index}}" class="speaker_details">
              {% if speaker.avatar %}
              <div class="speaker_avatar">
                <img class="speaker_img"
                     src="{{speaker.avatar}}"
                     alt="{{speaker.name | title}}"
                     title="{{speaker.name | title}}">
              </div>
              {% endif %}
              {% if speaker.biography %}
              <div class="speaker_biography">
                {{ speaker.biography | safe }}
              </div>
              {% endif %}
            </div>
            {% endif %}
          </div>
        {% endfor %}
      </div>
      <div id="{{slot.code}}_{{loop_index}}" class="slot_details">
        <div class="abstract">
          {% if slot.image %}
          <img class="slot_img"
                src="{{slot.image}}"
                alt="{{slot.name}}"
                title="{{slot.name}}">
          {% endif %}
          {% if slot.abstract %}
          <p>{{slot.abstract | safe }}</p>
          {% endif %}
          {% if slot.description %}
          <p>{{slot.description | safe }}</p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
