<div></div>
<div class="nav-wrapper">
  <div class="flex flex-row">
    <button class="prev" type="button" (click)="prev()">
      <ui-icon icon="arrow_head" size="12px"></ui-icon>
    </button>
    <div class="display-year-month">
      {{ calendar.displayed | date: 'MMMM yyyy' }}
    </div>
    <button class="next" type="button" (click)="next()">
      <ui-icon icon="arrow_head" size="12px"></ui-icon>
    </button>
  </div>

  <div class="grid grid-flow-col gap-4 col-start-8">
    <button class="today" type="button" (click)="today()">Heute</button>
    @if (calendar.mode === 'week') {
      <a class="calendar-nav" [routerLink]="['/filiale/task-calendar/calendar']">
        <span>zum Kalender</span>
        <ui-icon icon="calendar" size="18px"></ui-icon>
      </a>
    }
    @if (calendar.mode === 'month') {
      <a class="task-nav" [routerLink]="['/filiale/task-calendar/tasks']">
        <span>zur Liste</span>
        <ui-icon icon="tasks" size="18px"></ui-icon>
      </a>
    }
  </div>
</div>
