<ul class="ui-month-year-body__list">
  @if (viewState.displayedView() === 'month') {
    @for (month of months(); track month.label) {
      <button
        (click)="updateMonth(month.value)"
        type="button"
        class="ui-month-year-body__list-element"
        [class.selected]="isSelectedMonth(month.value)"
      >
        <span>{{ month.label }}</span>
        @if (isSelectedMonth(month.value)) {
          <ng-icon size="1.5rem" name="isaActionCheck"></ng-icon>
        }
      </button>
    }
  }

  @if (viewState.displayedView() === 'year') {
    @for (year of years(); track year) {
      <button
        (click)="updateYear(year.value)"
        type="button"
        class="ui-month-year-body__list-element"
        [class.selected]="isSelectedYear(year.value)"
      >
        <span>{{ year.label }}</span>
        @if (isSelectedYear(year.value)) {
          <ng-icon size="1.5rem" name="isaActionCheck"></ng-icon>
        }
      </button>
    }
  }
</ul>

<div class="ui-month-body__actions">
  <button
    type="button"
    uiButton
    (click)="rollbackDisplayedMonthYear(); viewState.displayedView.set('day')"
    color="secondary"
  >
    Verlassen
  </button>

  <button
    type="button"
    uiButton
    [disabled]="canSave()"
    color="primary"
    (click)="viewState.displayedView.set('day')"
  >
    Speichern
  </button>
</div>
