<section id="{{ block.id }}" class="block-calendar theme {{ block.fullwidth ? 'width-full' : 'width-box' }}">
  <div>
    <header class="block-calendar-header">
      <h2 class="type-title">{{ block.title }}</h2>

      <div class="type-txt">
        {{ block.description |> md }}
      </div>
    </header>
  </div>

  {{ for day of block.days }}
  <div class="event-list">
    <h3 class="type-subtitle">{{ day.title }}</h3>

    <div class="event-tracks" style="--tracks:[{{ day.tracks.map(t => `${t.id}-start] minmax(10em, auto) [${t.id}-end`).join(" ") }}]">
      {{ for track of day.tracks }}
        <h4 class="type-short-bold event-track-title" style="--track:{{ track.id }}">{{ track.title }}</h4>
      {{ /for }}

      {{ for event of day.events }}
      {{ set id = `dialog-${counter()}` }}
      {{ set hasContent = !!(event.description || event.speakers?.length) }}

      <div class="event" id="{{ event.id }}" style="--track:{{ event.track || '1 / -1' }};">
        {{ if !hasContent }}
          <div class="event-header">
            <time class="event-time type-caption">{{ event.time }}</time>
            <strong class="event-title type-short-m-bold">
              {{ if event.label }}
              <span class="badge">{{ event.label }}</span>
              {{ /if }}

              {{ event.title }}
            </strong>

            {{ if event.subtitle }}
              <p class="event-subtitle type-caption">
                {{ event.subtitle }}
              </p>
            {{ /if }}
          </div>
        {{ else }}
          <button data-open="{{ id }}" class="event-header">
            <time class="event-time type-caption">{{ event.time }}</time>
            <strong class="event-title type-short-m-bold">
              {{ if event.label }}
              <span class="badge">{{ event.label }}</span>
              {{ /if }}

              {{ event.title }}
            </strong>

            {{ if event.subtitle }}
              <p class="event-subtitle type-caption">
                {{ event.subtitle }}
              </p>
            {{ /if }}
          </button>

          <dialog class="modal theme is-light" id="{{ id }}">
            <button data-close class="modal-close" aria-label="Cerrar">
              {{ "x" |> icon("regular") }}
            </button>
            
            <div class="modal-content">
              <header class="event-modal-header">
                <div class="event-header">
                  <time class="event-time type-caption">{{ event.time }}</time>
                  <strong class="event-title type-subtitle">{{ event.title }}</strong>

                  {{ if event.subtitle }}
                    <p class="event-subtitle type-caption">
                      {{ event.subtitle }}
                    </p>
                  {{ /if }}
                </div>
              </header>

              <div class="event-modal-description type-txt">
                {{ event.description |> md }}
              </div>

              {{ if event.speakers?.length }}
                {{ set speakers = blocks
                    .filter((block) => block.type === "speakers")
                    .shift()?.speakers
                    .filter((speaker) => event.speakers.includes(speaker.id))
                }}

                <ul class="event-modal-speakers">
                {{ for speaker of speakers }}
                <li>
                  <button data-open="dialog-{{ speaker.id }}">
                    <img src="{{ speaker.image }}" alt="Retrato">
                    <div>
                      <strong class="type-txt-bold">{{ speaker.name }}</strong>
                      <p class="type-caption">{{ speaker.company }}<br> <em>{{ speaker.role }}</em></p>
                    </div>
                  </button>
                </li>
                {{ /for }}
                </ul>
              {{ /if }}
            </div>
          </dialog>
        {{ /if }}
      </div>
      {{ /for }}
    </div>
  </div>
  {{ /for }}
</section>
