<ion-grid class="ion-no-padding-top ion-no-padding-bottom">
  <ion-row class="ion-justify-content-center ion-align-items-center">
    <ion-col>
      <ion-button (click)="goBackward()" [disabled]="!isBackArrowAllowed" class="pickdate-styles ion-no-padding" style="min-width: fit-content !important">
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-col>
    <ion-col>
      @if (translate) {
        <ion-button (click)="presentPopover($event)" class="pickdate-styles">
          {{ service.historyPeriod.value.getText(translate, service) }}
        </ion-button>
      }
    </ion-col>
    <ion-col>
      <ion-button [disabled]="!isForwardArrowAllowed" (click)="goForward()" class="pickdate-styles ion-no-padding" style="min-width: fit-content !important">
        <ion-icon name="arrow-forward-outline"></ion-icon>
      </ion-button>
    </ion-col>
  </ion-row>
</ion-grid>
