<div class="row">
  <div class="col-sm">
    <div class="card mb-3">
      <h3 class="card-header">{{ "directory" | i18n }}</h3>
      <div class="card-body">
        <div class="form-group">
          <label for="directory">{{ "type" | i18n }}</label>
          <select class="form-control" id="directory" name="Directory" [(ngModel)]="directory">
            <option *ngFor="let o of directoryOptions" [ngValue]="o.value">
              {{ o.name }}
            </option>
          </select>
        </div>
        <div [hidden]="directory != directoryType.Ldap">
          <div class="form-group">
            <label for="hostname">{{ "serverHostname" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="hostname"
              name="Hostname"
              [(ngModel)]="ldap.hostname"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} ad.company.com</small>
          </div>
          <div class="form-group">
            <label for="port">{{ "port" | i18n }}</label>
            <input type="text" class="form-control" id="port" name="Port" [(ngModel)]="ldap.port" />
            <small class="text-muted form-text">{{ "ex" | i18n }} 389</small>
          </div>
          <div class="form-group">
            <label for="rootPath">{{ "rootPath" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="rootPath"
              name="RootPath"
              [(ngModel)]="ldap.rootPath"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} dc=company,dc=com</small>
          </div>
          <div class="form-group">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                id="ad"
                [(ngModel)]="ldap.ad"
                name="AD"
              />
              <label class="form-check-label" for="ad">{{ "ldapAd" | i18n }}</label>
            </div>
          </div>
          <div class="form-group" *ngIf="!ldap.ad">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                id="pagedSearch"
                [(ngModel)]="ldap.pagedSearch"
                name="PagedSearch"
              />
              <label class="form-check-label" for="pagedSearch">{{
                "ldapPagedResults" | i18n
              }}</label>
            </div>
          </div>
          <div class="form-group">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                id="ldapEncrypted"
                [(ngModel)]="ldap.ssl"
                name="Encrypted"
              />
              <label class="form-check-label" for="ldapEncrypted">{{
                "ldapEncrypted" | i18n
              }}</label>
            </div>
          </div>
          <div class="ml-4" *ngIf="ldap.ssl">
            <div class="form-group">
              <div class="form-radio">
                <input
                  class="form-radio-input"
                  type="radio"
                  [value]="false"
                  id="ssl"
                  [(ngModel)]="ldap.startTls"
                  name="SSL"
                />
                <label class="form-radio-label" for="ssl">{{ "ldapSsl" | i18n }}</label>
              </div>
              <div class="form-radio">
                <input
                  class="form-radio-input"
                  type="radio"
                  [value]="true"
                  id="startTls"
                  [(ngModel)]="ldap.startTls"
                  name="StartTLS"
                />
                <label class="form-radio-label" for="startTls">{{ "ldapTls" | i18n }}</label>
              </div>
            </div>
            <div class="ml-4" *ngIf="ldap.startTls">
              <p>{{ "ldapTlsUntrustedDesc" | i18n }}</p>
              <div class="form-group">
                <label for="tlsCaPath">{{ "ldapTlsCa" | i18n }}</label>
                <input
                  type="file"
                  class="form-control-file mb-2"
                  id="tlsCaPath_file"
                  (change)="setSslPath('tlsCaPath')"
                />
                <input
                  type="text"
                  class="form-control"
                  id="tlsCaPath"
                  name="TLSCaPath"
                  [(ngModel)]="ldap.tlsCaPath"
                />
              </div>
            </div>
            <div class="ml-4" *ngIf="!ldap.startTls">
              <p>{{ "ldapSslUntrustedDesc" | i18n }}</p>
              <div class="form-group">
                <label for="sslCertPath">{{ "ldapSslCert" | i18n }}</label>
                <input
                  type="file"
                  class="form-control-file mb-2"
                  id="sslCertPath_file"
                  (change)="setSslPath('sslCertPath')"
                />
                <input
                  type="text"
                  class="form-control"
                  id="sslCertPath"
                  name="SSLCertPath"
                  [(ngModel)]="ldap.sslCertPath"
                />
              </div>
              <div class="form-group">
                <label for="sslKeyPath">{{ "ldapSslKey" | i18n }}</label>
                <input
                  type="file"
                  class="form-control-file mb-2"
                  id="sslKeyPath_file"
                  (change)="setSslPath('sslKeyPath')"
                />
                <input
                  type="text"
                  class="form-control"
                  id="sslKeyPath"
                  name="SSLKeyPath"
                  [(ngModel)]="ldap.sslKeyPath"
                />
              </div>
              <div class="form-group">
                <label for="sslCaPath">{{ "ldapSslCa" | i18n }}</label>
                <input
                  type="file"
                  class="form-control-file mb-2"
                  id="sslCaPath_file"
                  (change)="setSslPath('sslCaPath')"
                />
                <input
                  type="text"
                  class="form-control"
                  id="sslCaPath"
                  name="SSLCaPath"
                  [(ngModel)]="ldap.sslCaPath"
                />
              </div>
            </div>
            <div class="form-group">
              <div class="form-check">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="certDoNotVerify"
                  [(ngModel)]="ldap.sslAllowUnauthorized"
                  name="CertDoNoVerify"
                />
                <label class="form-check-label" for="certDoNotVerify">{{
                  "ldapCertDoNotVerify" | i18n
                }}</label>
              </div>
            </div>
          </div>
          <div class="form-group" [hidden]="true">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                id="currentUser"
                [(ngModel)]="ldap.currentUser"
                name="CurrentUser"
              />
              <label class="form-check-label" for="currentUser">{{ "currentUser" | i18n }}</label>
            </div>
          </div>
          <div [hidden]="ldap.currentUser">
            <div class="form-group">
              <label for="username">{{ "username" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="username"
                name="Username"
                [(ngModel)]="ldap.username"
              />
              <small class="text-muted form-text" *ngIf="ldap.ad"
                >{{ "ex" | i18n }} company\admin</small
              >
              <small class="text-muted form-text" *ngIf="!ldap.ad"
                >{{ "ex" | i18n }} cn=admin,dc=company,dc=com</small
              >
            </div>
            <div class="form-group">
              <label for="password">{{ "password" | i18n }}</label>
              <div class="input-group">
                <input
                  type="{{ showLdapPassword ? 'text' : 'password' }}"
                  class="form-control"
                  id="password"
                  name="Password"
                  [(ngModel)]="ldap.password"
                />
                <div class="input-group-append">
                  <button
                    type="button"
                    class="btn btn-outline-secondary"
                    appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                    (click)="toggleLdapPassword()"
                  >
                    <i
                      class="bwi bwi-lg"
                      aria-hidden="true"
                      [ngClass]="showLdapPassword ? 'bwi-eye-slash' : 'bwi-eye'"
                    ></i>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div [hidden]="directory != directoryType.AzureActiveDirectory">
          <div class="form-group">
            <label for="identityAuthority">{{ "identityAuthority" | i18n }}</label>
            <select
              class="form-control"
              id="identityAuthority"
              name="IdentityAuthority"
              [(ngModel)]="azure.identityAuthority"
            >
              <option value="login.microsoftonline.com">Azure AD Public</option>
              <option value="login.microsoftonline.us">Azure AD Government</option>
            </select>
          </div>
          <div class="form-group">
            <label for="tenant">{{ "tenant" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="tenant"
              name="Tenant"
              [(ngModel)]="azure.tenant"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} companyad.onmicrosoft.com</small>
          </div>
          <div class="form-group">
            <label for="applicationId">{{ "applicationId" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="applicationId"
              name="ApplicationId"
              [(ngModel)]="azure.applicationId"
            />
          </div>
          <div class="form-group">
            <label for="secretKey">{{ "secretKey" | i18n }}</label>
            <div class="input-group">
              <input
                type="{{ showAzureKey ? 'text' : 'password' }}"
                class="form-control"
                id="secretKey"
                name="SecretKey"
                [(ngModel)]="azure.key"
              />
              <div class="input-group-append">
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  (click)="toggleAzureKey()"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="showAzureKey ? 'bwi-eye-slash' : 'bwi-eye'"
                  ></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div [hidden]="directory != directoryType.Okta">
          <div class="form-group">
            <label for="orgUrl">{{ "organizationUrl" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="orgUrl"
              name="OrgUrl"
              [(ngModel)]="okta.orgUrl"
            />
            <small class="text-muted form-text"
              >{{ "ex" | i18n }} https://mycompany.okta.com/</small
            >
          </div>
          <div class="form-group">
            <label for="oktaToken">{{ "token" | i18n }}</label>
            <div class="input-group">
              <input
                type="{{ showOktaKey ? 'text' : 'password' }}"
                class="form-control"
                id="oktaToken"
                name="OktaToken"
                [(ngModel)]="okta.token"
              />
              <div class="input-group-append">
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  (click)="toggleOktaKey()"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="showOktaKey ? 'bwi-eye-slash' : 'bwi-eye'"
                  ></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div [hidden]="directory != directoryType.OneLogin">
          <div class="form-group">
            <label for="oneLoginClientId">{{ "clientId" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="oneLoginClientId"
              name="OneLoginClientId"
              [(ngModel)]="oneLogin.clientId"
            />
          </div>
          <div class="form-group">
            <label for="oneLoginClientSecret">{{ "clientSecret" | i18n }}</label>
            <div class="input-group">
              <input
                type="{{ showOneLoginSecret ? 'text' : 'password' }}"
                class="form-control"
                id="oneLoginClientSecret"
                name="OneLoginClientSecret"
                [(ngModel)]="oneLogin.clientSecret"
              />
              <div class="input-group-append">
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  appA11yTitle="{{ 'toggleVisibility' | i18n }}"
                  (click)="toggleOneLoginSecret()"
                >
                  <i
                    class="bwi bwi-lg"
                    aria-hidden="true"
                    [ngClass]="showOneLoginSecret ? 'bwi-eye-slash' : 'bwi-eye'"
                  ></i>
                </button>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label for="oneLoginRegion">{{ "region" | i18n }}</label>
            <select
              class="form-control"
              id="oneLoginRegion"
              name="OneLoginRegion"
              [(ngModel)]="oneLogin.region"
            >
              <option value="us">US</option>
              <option value="eu">EU</option>
            </select>
          </div>
        </div>
        <div [hidden]="directory != directoryType.GSuite">
          <div class="form-group">
            <label for="domain">{{ "domain" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="domain"
              name="Domain"
              [(ngModel)]="gsuite.domain"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} company.com</small>
          </div>
          <div class="form-group">
            <label for="adminUser">{{ "adminUser" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="adminUser"
              name="AdminUser"
              [(ngModel)]="gsuite.adminUser"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} admin@company.com</small>
          </div>
          <div class="form-group">
            <label for="customerId">{{ "customerId" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="customerId"
              name="CustomerId"
              [(ngModel)]="gsuite.customer"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} 39204722352</small>
          </div>
          <div class="form-group">
            <label for="keyFile">{{ "jsonKeyFile" | i18n }}</label>
            <input
              type="file"
              class="form-control-file"
              id="keyFile"
              accept=".json"
              (change)="parseKeyFile()"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} My Project-jksd3jd223.json</small>
          </div>
          <div class="form-group" [hidden]="!gsuite.clientEmail">
            <label for="clientEmail">{{ "clientEmail" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="clientEmail"
              name="ClientEmail"
              [(ngModel)]="gsuite.clientEmail"
            />
          </div>
          <div class="form-group" [hidden]="!gsuite.privateKey">
            <label for="privateKey">{{ "privateKey" | i18n }}</label>
            <textarea
              class="form-control text-monospace"
              id="privateKey"
              name="PrivateKey"
              [(ngModel)]="gsuite.privateKey"
            >
            </textarea>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm">
    <div class="card">
      <h3 class="card-header">{{ "sync" | i18n }}</h3>
      <div class="card-body">
        <div class="form-group">
          <label for="interval">{{ "interval" | i18n }}</label>
          <input
            type="number"
            min="5"
            class="form-control"
            id="interval"
            name="Interval"
            [(ngModel)]="sync.interval"
          />
          <small class="text-muted form-text">{{ "intervalMin" | i18n }}</small>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              id="removeDisabled"
              [(ngModel)]="sync.removeDisabled"
              name="RemoveDisabled"
            />
            <label class="form-check-label" for="removeDisabled">{{
              "removeDisabled" | i18n
            }}</label>
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              id="overwriteExisting"
              [(ngModel)]="sync.overwriteExisting"
              name="OverwriteExisting"
            />
            <label class="form-check-label" for="overwriteExisting">{{
              "overwriteExisting" | i18n
            }}</label>
          </div>
        </div>
        <div class="form-group">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              id="largeImport"
              [(ngModel)]="sync.largeImport"
              name="LargeImport"
            />
            <label class="form-check-label" for="largeImport">{{ "largeImport" | i18n }}</label>
          </div>
        </div>
        <div [hidden]="directory != directoryType.Ldap">
          <div [hidden]="ldap.ad">
            <div class="form-group">
              <label for="memberAttribute">{{ "memberAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="memberAttribute"
                name="MemberAttribute"
                [(ngModel)]="sync.memberAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} uniqueMember</small>
            </div>
            <div class="form-group">
              <label for="creationDateAttribute">{{ "creationDateAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="creationDateAttribute"
                name="CreationDateAttribute"
                [(ngModel)]="sync.creationDateAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} whenCreated</small>
            </div>
            <div class="form-group">
              <label for="revisionDateAttribute">{{ "revisionDateAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="revisionDateAttribute"
                name="RevisionDateAttribute"
                [(ngModel)]="sync.revisionDateAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} whenChanged</small>
            </div>
          </div>
        </div>
        <div [hidden]="directory != directoryType.Ldap && directory != directoryType.OneLogin">
          <div class="form-group">
            <div class="form-check">
              <input
                class="form-check-input"
                type="checkbox"
                id="useEmailPrefixSuffix"
                [(ngModel)]="sync.useEmailPrefixSuffix"
                name="UseEmailPrefixSuffix"
              />
              <label class="form-check-label" for="useEmailPrefixSuffix">{{
                "useEmailPrefixSuffix" | i18n
              }}</label>
            </div>
          </div>
          <div [hidden]="!sync.useEmailPrefixSuffix">
            <div class="form-group" [hidden]="ldap.ad || directory != directoryType.Ldap">
              <label for="emailPrefixAttribute">{{ "emailPrefixAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="emailPrefixAttribute"
                name="EmailPrefixAttribute"
                [(ngModel)]="sync.emailPrefixAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} accountName</small>
            </div>
            <div class="form-group">
              <label for="emailSuffix">{{ "emailSuffix" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="emailSuffix"
                name="EmailSuffix"
                [(ngModel)]="sync.emailSuffix"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} @company.com</small>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              id="syncUsers"
              [(ngModel)]="sync.users"
              name="SyncUsers"
            />
            <label class="form-check-label" for="syncUsers">{{ "syncUsers" | i18n }}</label>
          </div>
        </div>
        <div [hidden]="!sync.users">
          <div class="form-group">
            <label for="userFilter">{{ "userFilter" | i18n }}</label>
            <textarea
              class="form-control"
              id="userFilter"
              name="UserFilter"
              [(ngModel)]="sync.userFilter"
            ></textarea>
            <small class="text-muted form-text" *ngIf="directory === directoryType.Ldap"
              >{{ "ex" | i18n }} (&amp;(givenName=John)(|(l=Dallas)(l=Austin)))</small
            >
            <small
              class="text-muted form-text"
              *ngIf="directory === directoryType.AzureActiveDirectory"
              >{{ "ex" | i18n }} exclude:joe@company.com</small
            >
            <small class="text-muted form-text" *ngIf="directory === directoryType.Okta"
              >{{ "ex" | i18n }} exclude:joe@company.com | profile.firstName eq "John"</small
            >
            <small class="text-muted form-text" *ngIf="directory === directoryType.GSuite"
              >{{ "ex" | i18n }} exclude:joe@company.com | orgName=Engineering</small
            >
          </div>
          <div class="form-group" [hidden]="directory != directoryType.Ldap">
            <label for="userPath">{{ "userPath" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="userPath"
              name="UserPath"
              [(ngModel)]="sync.userPath"
            />
            <small class="text-muted form-text">{{ "ex" | i18n }} CN=Users</small>
          </div>
          <div [hidden]="directory != directoryType.Ldap || ldap.ad">
            <div class="form-group">
              <label for="userObjectClass">{{ "userObjectClass" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="userObjectClass"
                name="UserObjectClass"
                [(ngModel)]="sync.userObjectClass"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} inetOrgPerson</small>
            </div>
            <div class="form-group">
              <label for="userEmailAttribute">{{ "userEmailAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="userEmailAttribute"
                name="UserEmailAttribute"
                [(ngModel)]="sync.userEmailAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} mail</small>
            </div>
          </div>
        </div>

        <div class="form-group">
          <div class="form-check">
            <input
              class="form-check-input"
              type="checkbox"
              id="syncGroups"
              [(ngModel)]="sync.groups"
              name="SyncGroups"
            />
            <label class="form-check-label" for="syncGroups">{{
              (directory !== directoryType.OneLogin ? "syncGroups" : "syncGroupsOneLogin") | i18n
            }}</label>
          </div>
        </div>
        <div [hidden]="!sync.groups">
          <div class="form-group">
            <label for="groupFilter">{{
              (directory !== directoryType.OneLogin ? "groupFilter" : "groupFilterOneLogin") | i18n
            }}</label>
            <textarea
              class="form-control"
              id="groupFilter"
              name="GroupFilter"
              [(ngModel)]="sync.groupFilter"
            ></textarea>
            <small class="text-muted form-text" *ngIf="directory === directoryType.Ldap"
              >{{ "ex" | i18n }} (&amp;(objectClass=group)(!(cn=Sales*))(!(cn=IT*)))</small
            >
            <small
              class="text-muted form-text"
              *ngIf="directory === directoryType.AzureActiveDirectory"
              >{{ "ex" | i18n }} include:Sales,IT</small
            >
            <small class="text-muted form-text" *ngIf="directory === directoryType.Okta"
              >{{ "ex" | i18n }} include:Sales,IT | type eq "APP_GROUP"</small
            >
            <small class="text-muted form-text" *ngIf="directory === directoryType.GSuite"
              >{{ "ex" | i18n }} include:Sales,IT</small
            >
          </div>
          <div class="form-group" [hidden]="directory != directoryType.Ldap">
            <label for="groupPath">{{ "groupPath" | i18n }}</label>
            <input
              type="text"
              class="form-control"
              id="groupPath"
              name="GroupPath"
              [(ngModel)]="sync.groupPath"
            />
            <small class="text-muted form-text" *ngIf="!ldap.ad">{{ "ex" | i18n }} CN=Groups</small>
            <small class="text-muted form-text" *ngIf="ldap.ad">{{ "ex" | i18n }} CN=Users</small>
          </div>
          <div [hidden]="directory != directoryType.Ldap || ldap.ad">
            <div class="form-group">
              <label for="groupObjectClass">{{ "groupObjectClass" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="groupObjectClass"
                name="GroupObjectClass"
                [(ngModel)]="sync.groupObjectClass"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} groupOfUniqueNames</small>
            </div>
            <div class="form-group">
              <label for="groupNameAttribute">{{ "groupNameAttribute" | i18n }}</label>
              <input
                type="text"
                class="form-control"
                id="groupNameAttribute"
                name="GroupNameAttribute"
                [(ngModel)]="sync.groupNameAttribute"
              />
              <small class="text-muted form-text">{{ "ex" | i18n }} name</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
