<div class="flex items-center gap-2 overflow-hidden rounded-xl border border-slate-200 bg-white p-2">
  <p-button icon="pi pi-chevron-right" size="small" text class="shrink-0" (onClick)="prevSeason()" />
  <div class="flex flex-1 cursor-pointer justify-center" (click)="openPicker()">
    <span class="text-base font-semibold">{{ currentSeason() }}</span>
  </div>
  <p-button icon="pi pi-chevron-left" size="small" text class="shrink-0" (onClick)="nextSeason()" />
</div>

@if (isOpen()) {
  <season-picker-dialog
    [visible]="isOpen()"
    [years]="years()"
    [seasons]="seasons"
    [selectedYear]="selectedYear()"
    [selectedSeason]="selectedSeason()"
    (visibleChange)="isOpen.set($event)"
    (submit)="submitPicker($event)" />
}
