<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>
  @if (tenant.supportUser?.enabled && supportUserLogin && isTopTenant) {
    <a
      class="btn btn-default btn-xs"
      title="{{ 'Log in' | translate }}"
      href="//{{ tenant.domain }}/apps/administration/?skipSSORedirect=true&user={{
        supportUserLogin
      }}"
      target="_blank"
      rel="noopener noreferrer"
    >
      <i c8yIcon="external-link"></i>
      {{ 'Log in' | translate }}
    </a>
  }
</div>
<div class="card-block large-padding">
  <div class="form-group">
    <label>{{ 'Status' | translate }}</label>
    <div>
      <p class="form-control-static">
        @if (!tenant.supportUser?.enabled) {
          <span title="{{ 'Disabled' | translate }}">
            <i
              class="text-danger"
              c8yIcon="ban"
            ></i>
            {{ 'Disabled' | translate }}
          </span>
        } @else {
          <span title="{{ 'Enabled' | translate }}">
            <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">
      @if (tenant.supportUser?.activeRequestCount) {
        <span>
          <span class="badge badge-danger">
            {{ tenant.supportUser?.activeRequestCount }}
          </span>
        </span>
      }
      @if (!tenant.supportUser?.enabled && tenant.supportUser?.activeRequestCount === 0) {
        <span>
          {{ 'No active requests' | translate }}
        </span>
      }
      @if (tenant.supportUser?.enabled && tenant.supportUser?.activeRequestCount === 0) {
        <span>
          {{ 'Not applicable' | translate }}
        </span>
      }
    </p>
  </div>
  @if (tenant.supportUser?.enabled) {
    <div class="form-group">
      <label>{{ 'Expiry date' | translate }}</label>
      <div>
        <p class="form-control-static">
          @if (tenant.supportUser?.expiryDate) {
            <span>
              {{ tenant.supportUser.expiryDate | c8yDate: 'medium' }}
            </span>
          } @else {
            <span>{{ 'No limit' | translate }}</span>
          }
        </p>
      </div>
    </div>
  }
</div>