<ng-container *ngIf="settings; else loading">
  <div class="row my-2 mx-2 pt-2 no-gutters">
    <div class="col">
      <h3 class="title">Global Settings</h3>
    </div>
  </div>

  <div class="form-row mx-2 pb-2 border-bottom">
    <div class="col-auto">
      <div class="btn-group">
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowJobDeletion', true)"
                [ngClass]="settings.allowJobDeletion ? 'btn-success active' : 'btn-outline-success'">
          Yes
        </button>
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowJobDeletion', false)"
                [ngClass]="!settings.allowJobDeletion ? 'btn-danger active' : 'btn-outline-danger'">
          No
        </button>
      </div>
    </div>
    <div class="col">
      <h5 class="m-0">Allow Job Deletion?</h5>
      <p>Allows job deletion through this interface</p>
    </div>
    <div class="col-1"></div>
    <div class="col-auto">
      <div class="btn-group">
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowProductDeletion', true)"
                [ngClass]="settings.allowProductDeletion ? 'btn-success active' : 'btn-outline-success'">
          Yes
        </button>
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowProductDeletion', false)"
                [ngClass]="!settings.allowProductDeletion ? 'btn-danger active' : 'btn-outline-danger'">
          No
        </button>
      </div>
    </div>
    <div class="col">
      <h5 class="m-0">Allow Product Deletion?</h5>
      <p>Allows product deletion through this interface</p>
    </div>
    <div class="col-1"></div>
    <div class="col-auto">
      <div class="btn-group">
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowAutomaticPims', true)"
                [ngClass]="settings.allowAutomaticPims ? 'btn-success active' : 'btn-outline-success'">
          Yes
        </button>
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowAutomaticPims', false)"
                [ngClass]="!settings.allowAutomaticPims ? 'btn-danger active' : 'btn-outline-danger'">
          No
        </button>
      </div>
    </div>
    <div class="col">
      <h5 class="m-0">Allow Automatic PIMs?</h5>
      <p>Allows automatic PIMs-splitting on Quicklook-calibration ingestion through this interface</p>
    </div>
    <div class="col-1"></div>
    <div class="col-auto">
      <div class="btn-group">
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowSeciPimsDeletion', true)"
                [ngClass]="settings.allowSeciPimsDeletion ? 'btn-success active' : 'btn-outline-success'">
          Yes
        </button>
        <button type="button" class="btn btn-lg" (click)="updateSettings('allowSeciPimsDeletion', false)"
                [ngClass]="!settings.allowSeciPimsDeletion ? 'btn-danger active' : 'btn-outline-danger'">
          No
        </button>
      </div>
    </div>
    <div class="col">
      <h5 class="m-0">Allow Automatic SECI PIMs Deletion?</h5>
      <p>Allows automatic PIMs deletion upon SECI workflow completion through this interface</p>
    </div>
  </div>
</ng-container>

<ng-container *ngIf="queueSettings | async; else loading">
  <app-queue-settings [queueSetting]="queueSetting"
                      *ngFor="let queueSetting of (queueSettings | async)"></app-queue-settings>
</ng-container>

<ng-template #loading>
  <app-loading></app-loading>
</ng-template>