<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{ event.title }} schedule</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </head>
  <body>
    <h1 class="btn btn-primary btn-lg w-100">{{ event.title }}</h1>

    <ul class="nav nav-tabs navbar-light" id="unconference-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="schedule-tab" data-bs-toggle="tab" data-bs-target="#schedule" type="button" role="tab" aria-controls="schedule" aria-selected="true">Schedule</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button" role="tab" aria-controls="map" aria-selected="false">Map</button>
      </li>
    </ul>
    <div class="tab-content" id="unconference-tabs-content">
      <div class="tab-pane fade show active" id="schedule" role="tabpanel" aria-labelledby="schedule-tab">
        <table class="table table-striped table-dark">
          <thead>
            <tr>
              <th class="unconference-schedule__time"></th>
              {% for s in schedule_times %}
                <th class="unconference-schedule__time">
                  {{ s.title }}<br>
                  {{ s.start|time:'H:i A' }}
                </th>
              {% endfor %}
              <th class="unconference-schedule__time"></th>
            </tr>
          </thead>
          <tbody>
            {% for room, schedule_times in schedule.items %}
              <tr>
                <td class="unconference-schedule__room">{{ room }}</td>
                {% for schedule_time, session in schedule_times.items %}
                  <td class="unconference-schedule__session">
                    {% if session.title %}
                      <strong>{{ session.title }}</strong><br />
                    {% endif %}

                    {% if session.leaders %}
                      {{ session.leaders }}<br />
                    {% endif %}

                    {% if session.id %}
                      <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#session-{{ session.id }}">MORE</button>
                    {% endif %}
                  </td>
                {% endfor %}
                <td class="unconference-schedule__room">{{ room }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <div class="tab-pane fade" id="map" role="tabpanel" aria-labelledby="map-tab">
        {% block map %}
        {% endblock map %}
      </div>
    </div>

    {% for s in sessions %}
      <div class="modal fade" id="session-{{ s.id }}" tabindex="-1" aria-labelledby="session-{{ s.id }}-label" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="session-{{ s.id }}-label">{{ s.title }} - {{ s.leaders }}</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              {{ s.description|linebreaksbr }}
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </body>
</html>
