@if (isInitialized) {
  <ion-footer style="position: fixed; bottom: 0">
    <ion-item #container lines="none" style="font-size: inherit" style="--background: var(--ion-color-toolbar-primary)" color="secondary">
      <ion-grid style="padding-top: 0" class="ion-padding-bottom">
        <ion-row class="ion-justify-content-center" style="padding-top: 0; padding-bottom: 0">
          @if (backButton) {
            <ion-col style="text-align: center" #myIonCol>
              <ion-button color="primary" (click)="location.back()" class="ion-custom-padding">
                <ng-content>{{ "GENERAL.BACK" | translate }}</ng-content>
                <ion-icon slot="start" name="arrow-back-outline"></ion-icon>
              </ion-button>
            </ion-col>
          }
          <ion-col [style.opacity]="areButtonsReadyToShow ? '100' : '0'" [size]="backButton ? '6' : '12'" style="text-align: center; white-space: nowrap">
            <ion-grid class="ion-no-padding" style="padding-top: 0; padding-bottom: 0">
              <ion-row style="padding-top: 0; padding-bottom: 0">
                <ion-col #buttonCol [size-lg]="popoverButtons.length > 0 ? '11' : '12'" [size-md]="popoverButtons.length > 0 ? '8' : '4'" [size-sm]="popoverButtons.length > 0 ? '6' : '6'">
                  @for (button of buttons; track button) {
                    <ion-button class="ion-custom-padding" style="--border-color: white" id="{{ button.id }}" (click)="button.callback()" #subnavigationbuttons>
                      {{ button.alias ?? button.id }}
                    </ion-button>
                  }
                  @if (popoverButtons.length > 0) {
                    <ion-button (click)="this.showPopover = true" class="ion-custom-padding" #popoverButtons> ... </ion-button>
                  }
                  <ion-popover [ngClass]="'custom-ion-popover'" dismissOnSelect="true" [isOpen]="showPopover" side="top" alignment="center" trigger-action="click" trigger="overflow-popover">
                    <ng-template>
                      <ion-content class="ion-padding" text-nowrap>
                        <ion-list [inset]="true" lines="full">
                          @for (popoverbtn of popoverButtons; track popoverbtn) {
                            <ion-item button color="none" lines="full" (click)="togglePopover(popoverbtn)">
                              <ion-label style="white-space: initial">
                                {{ popoverbtn.alias ?? popoverbtn.id }}
                              </ion-label>
                            </ion-item>
                          }
                        </ion-list>
                      </ion-content>
                    </ng-template>
                  </ion-popover>
                </ion-col>
              </ion-row>
            </ion-grid>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-footer>
}