<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-accounts'"
    [label]="'Accounts' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-accounts'"
    path="#users"
    [label]="'Users' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="row">
  <div class="col-md-8">
    <div class="card card--fullpage">
      <div class="card-header separator">
        <div class="card-title">
          {{ 'Application access' | translate }}
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-block">
          @if (formGroup) {
            <form [formGroup]="formGroup">
              @if (hasAppManagement()) {
                <div
                  class="alert alert-info"
                  translate
                >
                  This user is assigned a global role with "Application management" permission.
                  Therefore all applications are accessible.
                </div>
              }
              <c8y-application-access-list
                formControlName="applications"
                [userWithOwner]="userWithOwner()"
                [allSelected]="hasAppManagement()"
              ></c8y-application-access-list>
            </form>
          } @else {
            <c8y-loading></c8y-loading>
          }
        </div>
      </div>
      <div class="card-footer separator">
        <button
          class="btn btn-default"
          [title]="'Cancel' | translate"
          type="button"
          (click)="cancel()"
        >
          {{ 'Cancel' | translate }}
        </button>
        <button
          class="btn btn-primary"
          [title]="'Save' | translate"
          type="button"
          (click)="save()"
          [disabled]="hasAppManagement() || formGroup?.invalid || formGroup?.pristine"
        >
          {{ 'Save' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>