@if (prefillCustomerDiscountResource.isLoading()) {
  <app-skeleton-loader type="card" [count]="1" />
} @else if (prefillCustomerDiscountResource.error()) {
  <app-error-state (retryAction)="prefillCustomerDiscountResource.reload()" />
} @else {
  <mat-tab-group>
    <mat-tab label="Prefill Customer Discount">
      <mat-card>
        <mat-card-content>
          <mat-slide-toggle (click)="togglePrefill()" class="flex-auto" [checked]="prefillCustomerDiscount">
            Prefill the customer discount
          </mat-slide-toggle>
        </mat-card-content>
      </mat-card>
    </mat-tab>
    <mat-tab label="DB Maintenance">
      <mat-card>
        <mat-card-content>
          <form class="flex-col">
            <div class="row-container">
              <mat-form-field class="flex-auto">
                <mat-label>Start Date</mat-label>
                <input
                  matInput
                  [matDatepicker]="startDate"
                  (focus)="startDate.open()"
                  [formField]="maintenanceForm.startDate"
                  autocomplete="off"
                />
                <mat-datepicker-toggle matSuffix [for]="startDate"></mat-datepicker-toggle>
                <mat-datepicker #startDate></mat-datepicker>
              </mat-form-field>
              <mat-form-field class="flex-auto">
                <mat-label>Finish Date</mat-label>
                <input
                  matInput
                  [matDatepicker]="finishDate"
                  (focus)="finishDate.open()"
                  [formField]="maintenanceForm.finishDate"
                  autocomplete="off"
                />
                <mat-datepicker-toggle matSuffix [for]="finishDate"></mat-datepicker-toggle>
                <mat-datepicker #finishDate></mat-datepicker>
              </mat-form-field>
            </div>
            <h1>Beer</h1>
            <input mat-input class="flex-auto" type="file" (change)="detectBeer($event)" />
            <h1>Sale</h1>
            <input mat-input class="flex-auto" type="file" (change)="detectSale($event)" />
            <button type="button" mat-raised-button color="primary" (click)="runMaintenance()">Upload</button>
          </form>
        </mat-card-content>
      </mat-card>
    </mat-tab>
  </mat-tab-group>
  <footer class="footer">
    <p>Backend: v{{ auth.user()?.ver }} / Frontend: v{{ version }}</p>
  </footer>
}