<ion-header>
  <ion-toolbar>
    <ion-title>{{ patch.data.ui.name || "Embassy-" + patch.data['server-info'].id }}</ion-title>
    <ion-buttons slot="end">
      <badge-menu-button></badge-menu-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <ion-item-group>
    <div *ngFor="let cat of settings | keyvalue : asIsOrder">
      <ion-item-divider><ion-text color="dark">{{ cat.key }}</ion-text></ion-item-divider>
      <ion-item [detail]="button.detail" button *ngFor="let button of cat.value" (click)="button.action()">
        <ion-icon slot="start" [name]="button.icon"></ion-icon>
        <ion-label>
          <h2>{{ button.title }}</h2>
          <p *ngIf="button.description">{{ button.description }}</p>
          <p *ngIf="button.title === 'Create Backup'">
            <ion-text color="warning">
              Last Backup: {{ patch.data['server-info']['last-backup'] ? (patch.data['server-info']['last-backup'] | date: 'short') : 'never' }}
            </ion-text>
          </p>
        </ion-label>
      </ion-item>
    </div>
  </ion-item-group>
</ion-content>