<div
  class="flex flex-row justify-between items-center pl-[1.475rem] pr-[1.1rem] mb-1"
>
  <button
    type="button"
    (click)="viewState.displayedView.set(DatepickerView.Month)"
    class="flex flex-row items-center gap-2"
  >
    <span class="isa-text-body-1-bold-big text-isa-neutral-900">
      {{ viewState.displayedDate() | date: 'MMMM yyyy' }}
    </span>
    <ng-icon size="1.25rem" name="isaActionChevronDown"></ng-icon>
  </button>

  <div class="flex flex-row gap-4 items-center">
    <button type="button" (click)="previous()" class="flex items-center">
      <ng-icon size="1.5rem" name="isaActionChevronLeft"></ng-icon>
    </button>

    <button type="button" (click)="next()" class="flex items-center">
      <ng-icon size="1.5rem" name="isaActionChevronRight"></ng-icon>
    </button>
  </div>
</div>

<div class="flex flex-col justfy-center pl-[0.94rem] pr-[0.81rem]">
  <div class="ui-calendar-body__cell-container">
    @for (dayNameShort of daysOfWeek(); let i = $index; track i) {
      <div class="ui-calendar-body__cell day-label">
        {{ dayNameShort }}
      </div>
    }
  </div>

  <div class="ui-calendar-body__cell-container">
    @for (day of calendarDays(); let i = $index; track i) {
      <button
        [uiCalendarBodyCell]="day"
        type="button"
        class="ui-calendar-body__cell"
      >
        {{ day | date: 'd' }}
      </button>
    }
  </div>
</div>

<button
  class="ui-calendar-body__reset-cta"
  type="button"
  [disabled]="!hasValue()"
  (click)="datepicker.setValue()"
>
  Entfernen
</button>
