@if (applications().length) {
  <div class="legend form-block">
    {{ legend() | translate }}
    @if (legendHelpText()) {
      <button
        class="btn-help btn-help--sm"
        [attr.aria-label]="'Help' | translate"
        [popover]="legendHelpText() | translate"
        type="button"
        [triggers]="'focus'"
      ></button>
    }
  </div>

  @if (disabledEdit() && noOwnerAvailable()) {
    <div class="alert alert-info">
      {{ noOwnerMessage | translate: { 'user.userName': userWithOwner()?.user.userName } }}
    </div>
  }

  <c8y-list-group>
    @for (application of applications(); track application.id) {
      @let applicationAlreadyInappIdsOfGlobalRoles =
        application | alreadyInArray: appIdsOfGlobalRoles();
      @let applicationName = application | humanizeAppName | async;
      <c8y-list-item>
        <c8y-list-item-body>
          <div class="d-flex">
            <label class="c8y-checkbox a-i-center">
              <input
                [attr.aria-label]="applicationName"
                type="checkbox"
                [checked]="
                  allSelected() ||
                  (application | alreadyInArray: selectedAppIds()) ||
                  applicationAlreadyInappIdsOfGlobalRoles
                "
                (click)="toggleAccess(application)"
                [disabled]="disabledEdit() || applicationAlreadyInappIdsOfGlobalRoles"
              />
              <span></span>
              <span class="icon-36 l-h-1 p-l-8">
                <c8y-app-icon [app]="application"></c8y-app-icon>
              </span>
              <span
                class="m-l-8 text-normal l-h-1"
                [title]="applicationName"
              >
                {{ applicationName }}
                <br />
                <small class="text-muted">{{ application.contextPath }}</small>
              </span>
            </label>
            <span class="m-l-auto"></span>
            @if (applicationAlreadyInappIdsOfGlobalRoles) {
              <button
                class="btn-help"
                [attr.aria-label]="'Help' | translate"
                [popover]="
                  'This application is already made available in a global role' | translate
                "
                type="button"
                [triggers]="'focus'"
              ></button>
            }

            @if (
              (application | notAvailableInOwner: userWithOwner()?.owner) &&
              !applicationAlreadyInappIdsOfGlobalRoles
            ) {
              <button
                class="btn-dot"
                [attr.aria-label]="'This application is not accessible by the owner.' | translate"
                [popover]="'This application is not accessible by the owner.' | translate"
                type="button"
                [triggers]="'focus'"
              >
                <i
                  class="text-warning"
                  [c8yIcon]="'warning'"
                ></i>
              </button>
            }
          </div>
        </c8y-list-item-body>
      </c8y-list-item>
    }
  </c8y-list-group>
}