<div class="card-block separator-top" *ngIf="authConfiguration.preferredLoginOptionType !== 'BASIC'">
  <div class="col-sm-2">
    <h4 class="text-right">{{ 'Basic Auth restrictions' | translate }}</h4>
  </div>

  <div class="col-sm-9">
    <div class="row">
      <div class="col-sm-6">
        <c8y-form-group>
          <label class="c8y-switch" title="{{ 'Forbidden for web browsers' | translate }}">
            <input
              type="checkbox"
              name="forbiddenWebBrowsers"
              [(ngModel)]="forbiddenWebBrowsers"
            />
            <span></span>
            <span>{{ 'Forbidden for web browsers' | translate }}</span>
          </label>
          <div class="alert alert-warning" *ngIf="preferredLoginOptionType === tenantLoginOptionTypeEnum.BASIC && forbiddenWebBrowsers">
            {{ 'You are about to forbid browsers from using Basic authentication. This will prevent users from using web applications on your tenant because you are going to set Basic authentication as the preferred login mode.' | translate }}
          </div>
        </c8y-form-group>
      </div>
    </div>

    <div class="row">
      <div class="col-sm-6">
        <label title="{{ 'Forbidden user agents' | translate }}">{{ 'Forbidden user agents' | translate }}</label>
        <div
          class="input-group m-t-8"
          *ngFor="
            let forbiddenUserAgent of forbiddenUserAgents;
            index as i;
            last as isLast
          "
        >
          <input
            type="text"
            [name]="'forbiddenUserAgent' + i"
            [ngModel]="forbiddenUserAgent.value"
            (ngModelChange)="forbiddenUserAgentsChanged({event: $event, index: i})"
            class="form-control"
            placeholder="{{ 'e.g.' | translate }} forbidden-agent"
          />
          <div class="input-group-btn col-sm-2">
            <button
              title="{{ 'Remove' | translate }}"
              type="button"
              (click)="forbiddenUserAgentsRemove(i)"
              class="btn btn-clean text-primary"
            >
              <i class="dlt-c8y-icon-minus-circle text-danger"></i>
            </button>
            <button
              title="{{ 'Add' | translate }}"
              type="button"
              class="btn btn-clean text-primary"
              (click)="add(forbiddenUserAgents)"
              *ngIf="isLast"
            >
              <i class="dlt-c8y-icon-plus-circle"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="col-sm-6">
        <label title="{{ 'Trusted user agents' | translate }}">{{ 'Trusted user agents' | translate }}</label>
        <div
          class="input-group m-t-8"
          *ngFor="
            let trustedUserAgent of trustedUserAgents;
            index as i;
            last as isLast
          "
        >
          <input
            type="text"
            [name]="'trustedUserAgent' + i"
            class="form-control"
            placeholder="{{ 'e.g.' | translate }} trusted-agent"
            [ngModel]="trustedUserAgent.value"
            (ngModelChange)="trustedUserAgentsChanged({event: $event, index: i})"
          />
          <div class="input-group-btn col-sm-2">
            <button
              title="{{ 'Remove' | translate }}"
              type="button"
              (click)="trustedUserAgentsRemove(i)"
              class="btn btn-clean text-primary"
            >
              <i class="dlt-c8y-icon-minus-circle text-danger"></i>
            </button>
            <button
              title="{{ 'Add' | translate }}"
              type="button"
              class="btn btn-clean text-primary"
              (click)="add(trustedUserAgents)"
              *ngIf="isLast"
            >
              <i class="dlt-c8y-icon-plus-circle"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>