<div class="selected" (click)="toggle()">
  <span>{{ selected | date: 'dd.MM.yy' }}</span>
  <lib-icon
    *ngIf="!disabled"
    class="icon"
    [rotateBackwards]="expanded"
    transition="all 0.2s linear"
    width="17px"
    name="Arrow_Down_2_branch"
  ></lib-icon>
</div>

<div class="calendar" *ngIf="expanded">
  <div class="triangle"></div>
  <div class="month-nav">
    <div class="nav-arrow back-arrow" (click)="previousMonth()">
      <lib-icon class="icon" width="7px" height="15px" name="calendar_prev"></lib-icon>
    </div>
    <div class="month-info">
      {{ months[month] + ' ' + year }}
    </div>
    <div class="nav-arrow next-arrow" (click)="nextMonth()">
      <lib-icon class="icon" width="7px" height="15px" name="calendar_next"></lib-icon>
    </div>
  </div>
  <hr class="branch" />
  <ng-container *ngFor="let week of monthMatrix; let first = first">
    <div class="grid week-names" *ngIf="first">
      <div class="grid-item week align-center" *ngFor="let day of week">
        {{ weeks[day] }}
      </div>
    </div>
    <div class="grid days" *ngIf="!first">
      <div class="grid-item day align-center" [ngClass]="{ sunday: last }" *ngFor="let day of week; let last = last">
        <div
          (click)="selectDay(day)"
          [ngClass]="{
            'selected-day': day === currentDay && month === selectedMonth && year === selectedYear,
            'base-date':
              day === baseDay &&
              month === baseMonth &&
              year === baseYear &&
              !(day === currentDay && month === selectedMonth && year === selectedYear)
          }"
          *ngIf="day !== 0"
        >
          {{ day }}
        </div>
        <div class="day-placeholder" *ngIf="day === 0"></div>
      </div>
    </div>
  </ng-container>
  <div class="action">
    <app-button [primary]="true" (action)="confirm()">Bestätigen</app-button>
  </div>
</div>
