<article class="ticket" [class.ticket--disabled]="disabled()" [attr.aria-disabled]="disabled()">
  @if (!disabled()) {
    <label class="ticket__selection">
      <input
        type="checkbox"
        [checked]="selected()"
        (change)="selected.set($any($event.target).checked)"
      />
      <span class="visually-hidden">Seleccionar ticket {{ title() }}</span>
    </label>
  }

  <div class="ticket__details">
    <h3 class="ticket__title">{{ title() }}</h3>
    <p class="ticket__id">ID: {{ ticketId() }}</p>
  </div>

  @if (date() || expired()) {
    <div class="ticket__status">
      @if (expired()) {
        <span class="ticket__expired">VENCIDO</span>
      }
      @if (date(); as ticketDate) {
        <time class="ticket__date">{{ ticketDate }}</time>
      }
    </div>
  }

  <div class="ticket__actions">
    <app-button
      variant="primary"
      buttonClass="ticket__qr-button"
      [disabled]="disabled()"
      (click)="viewQr.emit()"
    >
      <i class="fa-solid fa-qrcode" aria-hidden="true"></i>
      <span>Ver QR</span>
    </app-button>

    @if (!disabled()) {
      <app-icon-button
        variant="download"
        ariaLabel="Descargar ticket"
        [disabled]="isGeneratingPdf()"
        (clicked)="download.emit()"
      />
      <app-icon-button
        variant="share"
        ariaLabel="Compartir ticket"
        [disabled]="isGeneratingPdf()"
        (clicked)="share.emit()"
      />
    }
  </div>
</article>
