{% load i18n %}
{% block cell-content %}
  {% if cell.title %}
    <h2 class="cell--title">{{ cell.title }}</h2>
  {% endif %}

  <div class="cell--body">
    <section class="events-timetable--week">
      <header class="events-timetable--week-header">
        <div class="buttons-group">
          <button
            class="events-timetable--change-week previous"
            {% if previous_monday %}
              data-week={{ previous_monday|date:"Y-m-d" }}
            {% else %}
              disabled
            {% endif %}
          >
            <span class="sr-only">{% trans "Previous week" %}</span>
          </button>
          <button
            class="events-timetable--change-week next"
            {% if next_monday %}
              data-week={{ next_monday|date:"Y-m-d" }}
            {% else %}
              disabled
            {% endif %}
          >
            <span class="sr-only">{% trans "Next week" %}</span>
          </button>
        </div>
        <h3 class="events-timetable--week-label">
          {% blocktrans trimmed with start_day=days|first|date:"j" end_date=days|last|date:"j F Y" %}
            Week from {{ start_day }} to {{ end_date }}
          {% endblocktrans %}
        </h3>
      </header>
      <div
        class="events-timetable--timetable"
        style="
               --nb-days: {{ events_by_day|length }};
               --nb-hours: {{ hours|length }};
               --hour-height: {{ cell.hour_height }}px;
              ">
        <div class="events-timetable--hours" aria-hidden="true">
          {% for hour in hours %}
            <span>{{ hour }}</span>
          {% endfor %}
        </div>

        {% for day, events in events_by_day.items %}
          <h4 class="events-timetable--day-label {% if not events|length %}no-event{% endif %}">
            <time datetime="{{ day|date:"Y-m-d" }}">{{ day|date:"D j b" }}</time>
          </h4>

          <div class="events-timetable--day {% if not events|length %}no-event{% endif %}">
            <ul class="events-timetable--events-list bare-list">
              {% for event in events %}
                <li class="events-timetable--events-list-item">
                  <p
                    class="events-timetable--event"
                    style="
                           --event-top: calc(var(--hour-height) * {{ event.top|stringformat:".2f" }});
                           --event-height: calc(var(--hour-height) * {{ event.height|stringformat:".2f" }});
                           {% if event.color %}
                             --event-color: {{ event.color }};
                           {% endif %}
                          ">
                    <span class="events-timetable--event-date">
                      {{ event.start_datetime|time }} - {{ event.end_datetime|time }}
                    </span>
                    <strong class="events-timetable--event-title">{{ event.label }}</strong>
                    <span class="events-timetable--event-actions">
                      {% if cell.booking_form_slug and not event.disabled %}
                        <a
                          class="events-timetable--event-register"
                          href="{{ cell.booking_form_url }}?event={{ event.slug }}"
                        >{% trans "Book" context "book an event" %}</a>
                      {% elif event.full %}
                        {% trans "Full" context "book an event" %}
                      {% endif %}
                      {% if event.description %}
                        <a class="events-timetable--event-more" href="#">{% trans "Details" %}</a>
                      {% endif %}
                    </span>
                  </p>
                  {% if event.description %}
                    <div class="events-timetable--event-details">
                      <p>{{ event.description|linebreaksbr }}</p>
                      {% if event.pricing or event.url %}
                        <dl class="pairs">
                          {% if event.pricing %}
                            <dt class="label">{% trans "Price" %}</dt>
                            <dd class="value">{{ event.pricing }}</dd>
                          {% endif %}
                          {% if event.url %}
                            <dt class="label">URL</dt>
                            <dd class="value"><a href="{{ event.url }}">{{ event.url }}</a></dd>
                          {% endif %}
                        </dl>
                      {% endif %}
                    </div>
                  {% endif %}
                </li>
              {% endfor %}
            </ul>
          </div>
        {% endfor %}
      </div>
    </section>
  </div>
{% endblock %}