<!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>
    <header role="banner">
      <h1 class="btn btn-primary btn-lg w-100">{{ event.title }}</h1>
    </header>

    <main role="main">
      <nav area-label="main" role="navigation">
        <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>
      </nav>
      <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">Room</th>
                {% for s in schedule_times %}
                  <th class="unconference-schedule__time">
                    {{ s.title }}<br>
                    {{ s.start|time:'g:i A' }}
                  </th>
                {% endfor %}
                <th class="unconference-schedule__time">Room</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 %}
              <tfoot>
                <tr>
                  <th class="unconference-schedule__time">Room</th>
                  {% for s in schedule_times %}
                    <th class="unconference-schedule__time">
                      {{ s.title }}<br>
                      {{ s.start|time:'g:i A' }}
                    </th>
                  {% endfor %}
                  <th class="unconference-schedule__time">Room</th>
                </tr>
              </tfoot>
            </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 %}
    </main>
  </body>
</html>
