---js
{
  layout: "page.njk",
  toDate: function(dateStr) {
    return new Date(dateStr);
  }
}
---
{{ content | safe }}

{% for date, events in program %}
<section class="program-date">
  <h2 id="{{ date }}">
    {{ toDate(date).toLocaleDateString(lang, { weekday: 'long', month: 'short', day: 'numeric' }) }}
  </h2>
  <ul>
    {% for event in events %}
    <li class="timeslot">
      <div class="timeslot-container">
        <h3 id="{{date}}_{{loop.index}}">
          {% if event.livestream %}{% icon "solid:video", title="Livestream" %}{% endif %}
          {{ event.title | localized }}
        </h3>

        <div class="timeslot-time">
          <span class="start">{{ event.start }}</span>
          {% if event.end %}
          <span class="end">– {{ event.end }}</span>
          {% endif %}
          <span class="full">{{ event.start }}{{ " – " + event.end if event.end }}</span>
        </div>

        <p>{{ event.description | localized | mdInline | safe }}</p>

        {% if event.annotation %}
        <p class="annotation">
          {% icon "solid:exclamation", title=("Notice" if lang == "en" else "Hinweis") %}
          {{ event.annotation | localized | mdInline | safe }}
        </p>
        {% endif %}

        {% if event.location %}
        <p class="location">
          {% icon "solid:location-dot", title=("Location" if lang == "en" else "Veranstaltungsort") %}
          {{ event.location | localized | mdInline | safe }}
        </p>
        {% endif %}

        {% if event.checkin_link %}
        <a class="btn"
          {% if event.checkin_link.startsWith("http") %}
          href="{{ event.checkin_link }}"
          target="_blank"
          rel="noreferrer"
          {% else %}
          href="{{ event.checkin_link | locale_url }}"
          {% endif %}
        >
          Check-in
        </a>
        {% endif %}
      </div>
    </li>
    {% endfor %}
  </ul>
</section>
{% endfor %}

{% css %}
  {% include "program.css" %}
{% endcss %}