<div class="col-md-12 p-t-24">
  <div class="row m-l-8 m-r-8">
    <div class="col-xs-12 col-sm-3 col-md-2">
      <h4 class="text-normal text-right text-left-xs" translate>Basic</h4>
    </div>

    <div class="col-xs-12 col-sm-9 col-md-10 col-lg-9" *ngIf="templateModel">
      <div class="row" *ngIf="shouldShow('keyCloakAddress')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="keyCloakAddress" class="control-label" translate>Keycloak address</label>
            <input
              class="form-control"
              type="url"
              id="keyCloakAddress"
              name="keyCloakAddress"
              [(ngModel)]="templateModel.keyCloakAddress"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'https://example.de' }"
              required
            />
          </c8y-form-group>
        </div>
      </div>
      <div class="row" *ngIf="shouldShow('aadAddress')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="aadAddress" class="control-label" translate>Azure AD address</label>
            <input
              class="form-control"
              type="url"
              id="aadAddress"
              name="aadAddress"
              [(ngModel)]="templateModel.aadAddress"
              [placeholder]="
                'e.g. {{ example }}' | translate: { example: 'https://login.microsoftonline.de' }
              "
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('tenant')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="tenant" class="control-label" translate>Tenant</label>
            <input
              class="form-control"
              id="tenant"
              name="tenant"
              [(ngModel)]="templateModel.tenant"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y.onmicrosoft.de' }"
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('applicationId')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="applicationId" class="control-label" translate>Application ID</label>
            <input
              class="form-control"
              required
              id="applicationId"
              name="applicationId"
              [(ngModel)]="templateModel.applicationId"
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('realmName')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="realmName" class="control-label" translate>Realm name</label>
            <input
              class="form-control"
              required
              id="realmName"
              name="realmName"
              [(ngModel)]="templateModel.realmName"
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('redirectToPlatform')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="redirectToPlatform" class="control-label" translate>Redirect URL</label>
            <input
              type="url"
              class="form-control"
              id="redirectToPlatform"
              name="redirectToPlatform"
              [(ngModel)]="templateModel.redirectToPlatform"
              [placeholder]="
                'e.g. {{ example }}'
                  | translate
                    : {
                        example:
                          redirectToPlatformWarningParams?.defaultRedirectUrl ||
                          'https://tenant.domain.com'
                      }
              "
              required
            />
          </c8y-form-group>
        </div>
        <div class="col-sm-12">
          <div
            *ngIf="
              redirectToPlatformWarningParams &&
              templateModel.redirectToPlatform != redirectToPlatformWarningParams.defaultRedirectUrl
            "
          >
            <div
              class="alert alert-warning max-width-100 m-b-32"
              ngNonBindable
              translate
              [translateParams]="redirectToPlatformWarningParams"
            >
              For correct application behavior you can use only {{ defaultRedirectUrl }} or
              {{ host }} values, it is advised to use the first one.
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6" *ngIf="shouldShow('clientSecret')">
          <c8y-form-group>
            <label for="clientSecret" class="control-label" translate>Client secret</label>
            <input
              class="form-control"
              required
              id="clientSecret"
              name="clientSecret"
              [(ngModel)]="templateModel.clientSecret"
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6" *ngIf="shouldShow('clientId')">
          <c8y-form-group>
            <label for="clientId" class="control-label" translate>Client ID</label>
            <input
              class="form-control"
              id="clientId"
              name="clientId"
              [(ngModel)]="templateModel.clientId"
              [placeholder]="'e.g. {{ example }}' | translate: { example: '254234981c-78a8-4588…' }"
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('issuer')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="issuer" class="control-label" translate>Token issuer</label>
            <input
              class="form-control"
              id="issuer"
              name="issuer"
              [(ngModel)]="templateModel.issuer"
              [placeholder]="
                'e.g. {{ example }}'
                  | translate: { example: 'https://login.microsoftonline.de/237652-3727' }
              "
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('scopeId')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="scopeId" class="control-label" translate>Scope ID</label>
            <input
              class="form-control"
              id="scopeId"
              name="scopeId"
              [(ngModel)]="templateModel.scopeId"
              [placeholder]="'e.g. {{ example }}' | translate: { example: '237652-3727' }"
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6" *ngIf="shouldShow('buttonName')">
          <c8y-form-group>
            <label for="buttonName" class="control-label" translate>Button name</label>
            <input
              class="form-control"
              id="buttonName"
              name="buttonName"
              [(ngModel)]="templateModel.buttonName"
              [placeholder]="'e.g. Log in with Azure AD' | translate"
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6" *ngIf="shouldShow('providerName')">
          <c8y-form-group>
            <label for="providerName" class="control-label" translate>Provider name</label>
            <input
              class="form-control"
              id="providerName"
              name="providerName"
              [(ngModel)]="templateModel.providerName"
              [placeholder]="'e.g. {{ example }}' | translate: { example: 'Azure AD' }"
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('audience')">
        <div class="col-sm-6">
          <c8y-form-group>
            <label for="audience" class="control-label" translate>Audience</label>
            <input
              class="form-control"
              id="audience"
              name="audience"
              [(ngModel)]="templateModel.audience"
              [placeholder]="
                'e.g. {{ example }}' | translate: { example: 'https://test.example.com' }
              "
              required
            />
          </c8y-form-group>
        </div>
      </div>

      <div class="row" *ngIf="shouldShow('visibleOnLoginPage')">
        <div class="col-sm-6">
          <label title="{{ 'Visible on login page' | translate }}" class="c8y-switch">
            <input
              id="visibleOnLoginPage"
              name="visibleOnLoginPage"
              type="checkbox"
              [(ngModel)]="templateModel.visibleOnLoginPage"
            />
            <span></span>
            <span class="control-label">{{ 'Visible on login page' | translate }}</span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>