---js
{
  layout: "page.njk",
  getLocalized: function(item) {
    if (typeof item === "string") return item;
    return item[this.ctx.lang];
  },
  toDate: function(dateStr) {
    return new Date(dateStr);
  }
}
---
{{ content | safe }}

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

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

      <p>{{ getLocalized(event.description) }}</p>

      {% if event.annotation %}
      <p class="annotation">
        {{ getLocalized(event.annotation) }}
      </p>
      {% endif %}

      {% if event.location %}
      <p class="location">
        {{ getLocalized(event.location) }}
      </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 %}
    </li>
    {% endfor %}
  </ul>
{% endfor %}

{% css %}
.timeslot {
  display: block;
}
{% endcss %}