<div class="card-header separator sticky-top large-padding">
  <div class="card-title fit-w">
    <i
      class="c8y-icon c8y-icon-c8y-support"
      [ngClass]="{ 'c8y-icon-duocolor': tenant.supportUser?.enabled }"
    ></i>
    {{ 'Support user access' | translate }}
  </div>
  <ng-container *ngIf="tenant.supportUser?.enabled && supportUserLogin && isTopTenant">
    <a
      class="btn btn-default btn-xs"
      title="{{ 'Log in' | translate }}"
      href="//{{ tenant.domain }}/apps/administration/?user={{ supportUserLogin }}"
      target="_blank"
      rel="noopener noreferrer"
    >
      <i c8yIcon="external-link"></i>
      {{ 'Log in' | translate }}
    </a>
  </ng-container>
</div>
<div class="card-block large-padding">
  <div class="form-group">
    <label>{{ 'Status' | translate }}</label>
    <div>
      <p class="form-control-static">
        <span
          title="{{ 'Disabled' | translate }}"
          *ngIf="!tenant.supportUser?.enabled"
        >
          <i
            class="text-danger"
            c8yIcon="ban"
          ></i>
          {{ 'Disabled' | translate }}
        </span>
        <span
          title="{{ 'Enabled' | translate }}"
          *ngIf="tenant.supportUser?.enabled"
        >
          <i
            class="text-success"
            c8yIcon="check-circle"
          ></i>
          {{ 'Enabled' | translate }}
        </span>
      </p>
    </div>
  </div>
  <div class="form-group" data-cy="c8y-support-user-access--activeRequestCount">
    <label>{{ 'Active requests count' | translate }}</label>

    <p class="form-control-static">
      <span *ngIf="tenant.supportUser?.activeRequestCount">
        <span class="badge badge-danger">
          {{ tenant.supportUser?.activeRequestCount }}
        </span>
      </span>
      <span *ngIf="!tenant.supportUser?.enabled && tenant.supportUser?.activeRequestCount === 0">
        {{ 'No active requests' | translate }}
      </span>
      <span *ngIf="tenant.supportUser?.enabled && tenant.supportUser?.activeRequestCount === 0">
        {{ 'Not applicable' | translate }}
      </span>
    </p>
  </div>
  <div
    class="form-group"
    *ngIf="tenant.supportUser?.enabled"
  >
    <label>{{ 'Expiry date' | translate }}</label>
    <div>
      <p class="form-control-static">
        <span *ngIf="tenant.supportUser?.expiryDate">
          {{ tenant.supportUser?.expiryDate | c8yDate: 'medium' }}
        </span>
        <span *ngIf="!tenant.supportUser?.expiryDate">{{ 'No limit' | translate }}</span>
      </p>
    </div>
  </div>
</div>