@if (event(); as item) {
  <div class="event-detail row gx-sm-4 gx-lg-5">
    <aside class="event-detail__sidebar col-12 col-sm-4">
      <div class="event-detail__image" [class.event-detail__image--placeholder]="!item.image">
        @if (item.image) {
          <img [src]="item.image" [alt]="item.title" />
        } @else {
          <span aria-hidden="true"><i class="fa-regular fa-calendar"></i></span>
        }
      </div>

      @if (item.starts_at) {
        <app-counter-to [startsAt]="item.starts_at" />
      }

      @if (item.description) {
        <section class="event-detail__description" aria-labelledby="event-description-title">
          <h2 id="event-description-title">Descripción</h2>
          <p>{{ item.description }}</p>
        </section>
      }

      @if (item.social_media?.length) {
        <section class="event-detail__social" aria-labelledby="event-social-title">
          <h2 id="event-social-title">Información</h2>
          @for (social of item.social_media; track social.code) {
            <a [href]="social.url" target="_blank" rel="noopener noreferrer">
              <i [class]="socialIcon(social.code)" aria-hidden="true"></i>
              <span>{{ socialLabel(social.code) }}</span>
            </a>
          }
        </section>
      }

      @if (mapLocations().length) {
        <app-location-map
          class="event-detail__map"
          [locations]="mapLocations()"
          ariaLabel="Ubicación del evento"
          mapStyle="standard"
        />
      }
    </aside>

    <main class="event-detail__main col-12 col-sm-8">
      <header class="event-detail__header">
        <h1>{{ item.title }}</h1>
        @if (item.subtitle) { <p class="event-detail__subtitle">{{ item.subtitle }}</p> }
        <div class="event-detail__meta">
          @if (item.date_text) {
            <p><i class="fa-regular fa-calendar" aria-hidden="true"></i>
              {{ item.date_text }}@if (item.dates?.length === 1 && item.start_time) { · {{ item.start_time.slice(0, 5) }} h }
            </p>
          }
          @if (item.location) {
            <p><i class="fa-solid fa-location-dot" aria-hidden="true"></i>{{ item.location }}</p>
          }
        </div>
      </header>

      <section class="event-detail__products" aria-labelledby="event-products-title">
        <div class="event-detail__section-heading"><h2 id="event-products-title">Productos</h2></div>

        @if ((item.dates?.length ?? 0) > 1) {
          <label class="event-detail__date-label" for="event-date-select">Seleccioná fecha</label>
          <select id="event-date-select" class="event-detail__date-select" [value]="selectedDateId()" (change)="selectDate($event)">
            @for (date of item.dates; track date.id) {
              <option [value]="date.id">{{ formatDate(date.date) }} · {{ date.time_start.slice(0, 5) }} h</option>
            }
          </select>
        }

        @if (item.catalog_items?.length) {
          <div class="event-detail__product-list">
            @for (product of item.catalog_items; track product.id) {
              <div class="event-detail__product row align-items-center gx-3 gy-2">
                <h3 class="col-12 col-sm">{{ product.name }}</h3>
                <div class="event-detail__product-action col-auto ms-auto ms-sm-0">
                  @if (needsSelection(product)) {
                    <a [routerLink]="['/producto', product.id]">Elegir opciones</a>
                  } @else {
                    <app-quantity-selector
                      [quantity]="quantityFor(product.id)"
                      [min]="0"
                      [max]="maximumQuantityFor(product)"
                      size="medium"
                      (decrease)="changeQuantity(product, -1)"
                      (increase)="changeQuantity(product, 1)"
                    />
                  }
                </div>
                <strong class="event-detail__price col-auto">{{ priceFor(product) }}</strong>
              </div>
            }
          </div>
          <div class="event-detail__total"><span>Total</span><strong>{{ formatPrice(total()) }}</strong></div>
          <div class="event-detail__buttons">
            <app-button variant="cancel" [disabled]="!hasSelectedItems()" (click)="cancel()">Cancelar</app-button>
            <app-button variant="primary" [disabled]="total() === 0 || submitting()" (click)="buyNow()">
              {{ submitting() ? 'Procesando…' : 'Comprar' }}
            </app-button>
          </div>
        } @else {
          <p class="event-detail__empty">Por ahora no hay productos disponibles para este evento.</p>
        }
      </section>
    </main>
  </div>
} @else if (!loading()) {
  <p role="alert">No encontramos este evento.</p>
}