<div class="legend form-block" ng-show="marketApps.length" translate>Subscribed applications</div>

<div
  ng-show="marketApps.length && disabledEdit && noOwnerAvailable()"
  class="alert alert-info"
  translate
>
  You don't have the permission required to manage application access for {{ user.userName }}.
</div>

<ul class="c8y-list__group">
  <li class="c8y-list__item bg-inherit" ng-repeat="application in marketApps">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__body p-l-0 d-flex">
        <label class="c8y-checkbox a-i-center">
          <input
            type="checkbox"
            id="{{ 'appmarket' + $index }}"
            ng-checked="isAccessAllowed(application)"
            ng-click="toggleAccess(application)"
            ng-disabled="isDisabled(application)"
          />
          <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="{{ ::application | humanizeAppName }}">
            {{::application | humanizeAppName}}
            <br />
            <small class="text-muted">{{::application.contextPath}}</small>
          </span>
        </label>
        <span class="m-l-auto"></span>
        <button
          class="btn-help"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'This application is already made available in a global role' | translate
          }}"
          popover-placement="right"
          popover-trigger="'focus'"
          popover-append-to-body="true"
          ng-show="alreadyInGlobalRole(application)"
        ></button>
        <button
          class="btn-dot"
          type="button"
          aria-label="{{ 'This application is not accessible by the owner.' | translate }}"
          uib-popover="{{ 'This application is not accessible by the owner.' | translate }}"
          popover-placement="right"
          popover-trigger="'focus'"
          popover-append-to-body="true"
          ng-show="notAvailableInOwner(application) && !alreadyInGlobalRole(application)"
        >
          <i c8y-icon="warning" class="text-warning"></i>
        </button>
      </div>
    </div>
  </li>
</ul>

<div class="legend form-block p-t-16" ng-show="privateApps.length">
  {{ 'Custom applications' | translate }}
  <button
    class="btn-help btn-help--sm"
    type="button"
    aria-label="{{ 'Help' | translate }}"
    uib-popover="{{ 'Applications owned by your tenant' | translate }}"
    popover-placement="right"
    popover-trigger="'focus'"
    popover-append-to-body="true"
  ></button>
</div>
<div
  class="alert alert-info"
  ng-show="privateApps.length && disabledEdit && noOwnerAvailable()"
  translate
>
  You don't have the permission required to manage application access for {{ user.userName }}.
</div>
<ul class="c8y-list__group">
  <li class="c8y-list__item bg-inherit" ng-repeat="application in privateApps">
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__body p-l-0 d-flex">
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            id="{{ 'appprivate' + $index }}"
            ng-checked="isAccessAllowed(application)"
            ng-click="toggleAccess(application)"
            ng-disabled="isDisabled(application)"
          />
          <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="{{ ::application | humanizeAppName }}">
            {{::application | humanizeAppName}}
            <br />
            <small class="text-muted">{{::application.contextPath}}</small>
          </span>
        </label>

        <button
          class="btn-help m-l-auto"
          type="button"
          aria-label="{{ 'Help' | translate }}"
          uib-popover="{{
            'This application is already made available in a global role' | translate
          }}"
          popover-placement="right"
          popover-trigger="'focus'"
          ng-show="alreadyInGlobalRole(application)"
        ></button>
      </div>
    </div>
  </li>
</ul>
