<article class="ticket-selector">
  <header class="ticket-selector__header">
    <div>
      <h3 class="ticket-selector__title">
        {{ title() }}
        @if (unavailableMessage(); as message) {
          <app-tooltip [message]="message" />
        }
      </h3>
      @if (description()) {
        <p class="ticket-selector__description">{{ description() }}</p>
      }
    </div>
    <span class="ticket-selector__price text-primary">
      @if (priceRange().hasRange) {
        de <strong>{{ priceRange().minimum }}</strong> a
        <strong>{{ priceRange().maximum }}</strong>
      } @else {
        <strong>{{ priceRange().minimum }}</strong>
      }
    </span>
  </header>

  <div class="ticket-selector__selection">
    <span class="ticket-selector__label">Seleccioná Entrada/s:</span>

    <div class="ticket-selector__rows">
      @if (attributes().length > 0) {
        <div class="ticket-selector__columns" aria-hidden="true">
          <div class="ticket-selector__column-labels">
            @for (attribute of attributes(); track attribute.key) {
              <span class="ticket-selector__column-label">{{ attribute.label }}</span>
            }
          </div>
          <span class="ticket-selector__action-spacer"></span>
        </div>
      }

      @for (row of rows(); track row.id) {
        <div class="ticket-selector__row">
          <div class="ticket-selector__row-content">
            <div class="ticket-selector__fields variant-selector">
              @for (selector of row.selectors; track selector.key) {
                <select
                  class="form-select variant-selector__select"
                  [attr.aria-label]="selector.label"
                  [disabled]="rowDisabled(row) || !selector.enabled"
                  (change)="onSelectionKeyChange(row.id, selector, $any($event.target).value)"
                >
                  <option
                    value=""
                    disabled
                    [selected]="selectedOptionKey(row, selector.key) === ''"
                  >
                    Seleccioná {{ selector.label }}
                  </option>
                  @for (option of selector.options; track $index) {
                    <option
                      [value]="optionKey(option)"
                      [selected]="optionKey(option) === selectedOptionKey(row, selector.key)"
                    >
                      {{ optionLabel(option) }}
                    </option>
                  }
                </select>
              }
            </div>

            @if (row.status === 'reserving') {
              <span class="ticket-selector__row-status" role="status" aria-live="polite">
                Guardando...
              </span>
            }
          </div>
          <app-icon-button
            variant="trash"
            [bordered]="true"
            ariaLabel="Eliminar entrada"
            [disabled]="rowDisabled(row)"
            (clicked)="removeRow(row.id)"
          />
        </div>
      }
    </div>

    <app-button
      hostClass="ticket-selector__add-row"
      buttonClass="ticket-selector__add-row-button"
      variant="secondary"
      [disabled]="disabled() || !canAddRow()"
      (click)="addRow()"
    >
      + Agregar entrada
    </app-button>

    @if (availableVariantCount() === 0) {
      <p class="ticket-selector__empty">No hay entradas disponibles.</p>
    }

    <div class="ticket-selector__actions row g-0 justify-content-end">
      <div class="col-12 col-md-3">
        <app-button variant="primary" [disabled]="disabled() || !hasSelection()" (click)="onBuy()">
          Comprar
        </app-button>
      </div>
    </div>
  </div>

  @if (imageUrl(); as image) {
    <img class="ticket-selector__map" [src]="image" [alt]="'Plano de ubicaciones de ' + title()" />
  }
</article>
