<div class="fl-content fl-content-min-height">
  <app-fl-backdrop *ngIf="credentialsLoading" overlayParent></app-fl-backdrop>
  <!--suppress JSUnusedGlobalSymbols -->
  <app-form-errors #formErrors [formGroup]="credentialsForm"></app-form-errors>
  <div layoutDirection="row" layoutDirection-lt-md="column" appLayoutGap="10px">
    <form appFormSubmit (ngSubmit)="saveAndSync()" [formGroup]="credentialsForm" layoutDirection="column"
          appFlex="50" xsFlex="100" autocomplete="off">
      <input type="text" class="hide" name="username" autocomplete="false" tabindex="-1"/>
      <mat-form-field>
        <mat-label i18n>Keystone auth URL</mat-label>
        <input matInput type="text" formControlName="auth_url" required
               placeholder="Keystone auth URL" i18n-placeholder>
        <mat-error>{{fieldErrors['auth_url']}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Administrator username</mat-label>
        <input matInput type="text" formControlName="username" required
               placeholder="Administrator username" i18n-placeholder>
        <mat-error>{{fieldErrors['username']}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Password (hidden)</mat-label>
        <input matInput formControlName="password"
               placeholder="Content is hidden since it contains passwords" i18n-placeholder
               [type]="(passwordCtrl.value.length > 0)? 'password' : 'text'">
        <mat-error>{{fieldErrors['password']}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Administrator project ID</mat-label>
        <input matInput type="text" formControlName="user_project_id" required
               placeholder="Administrator project id" i18n-placeholder>
        <mat-error>{{fieldErrors['user_project_id']}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Administrator domain ID</mat-label>
        <input matInput type="text" formControlName="user_domain_id" required
               placeholder="Administrator domain id" i18n-placeholder>
        <mat-error>{{fieldErrors['user_domain_id']}}</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-label i18n>Default API interface</mat-label>
        <mat-select formControlName="default_interface" placeholder="Default API interface" i18n-placeholder required>
          <mat-option *ngFor="let option of interfaceOptions" [value]="option.name">{{option.display}}</mat-option>
        </mat-select>
      </mat-form-field>

      <mat-checkbox formControlName="require_valid_ssl" color="primary" i18n>Verify API SSL certificates</mat-checkbox>

      <mat-form-field *ngIf="credentialsForm.controls.require_valid_ssl.value">
        <mat-label i18n>API Certificate(required only for self signed certificates)</mat-label>
        <textarea (keydown.control.enter)="saveAndSync()"
                  matInput rows="10" placeholder="API Certificate(required only for self signed certificates)"
                  i18n-placeholder type="text" formControlName="certificate">
        </textarea>
        <mat-error>{{fieldErrors['certificate']}}</mat-error>
      </mat-form-field>


      <p i18n>Note that you must also configure <strong>Notifications</strong>, on the next tab, in
        order for Fleio to work.</p>
    </form>
    <div layoutDirection="column" class="fl-help-text hide-xs" appLayoutGap="10px">
      <h3 i18n>Keystone auth url</h3>
      <p class="fl-detail" i18n>
        The Keystone version 3 API URL used by Fleio to authenticate to OpenStack.
        The URL has the following form: https://keystone.url:5000/v3
      </p>
      <h3 i18n>Administrator username</h3>
      <p class="fl-detail" i18n>
        An OpenStack user with an administrative role. The default admin user can usually be used.
      </p>
      <h3 i18n>Administrator password</h3>
      <p class="fl-detail" i18n>
        The administrator user's password. The password is not shown here after it is set.
      </p>
      <h3 i18n>Administrator project id</h3>
      <p class="fl-detail" i18n>
        The administrator project ID (not the project name).
        Fleio will authenticate to OpenStack for administrative tasks using this project.
      </p>
      <h3 i18n>Administrator domain id</h3>
      <p class="fl-detail" i18n>
        The user domain id (not the domain name) to authenticate with.
        The "default" domain ID can be tried if unsure as it's usually present.
      </p>
      <h3 i18n>Default API interface</h3>
      <p class="fl-detail" i18n>
        The default interface Fleio uses for the OpenStack API access.
        Each service usually has 3 URLs (interfaces): public, private and admin.
        The public interface can be used if Fleio does not have access to the OpenStack internal network.
      </p>
      <h3 i18n>Verify API SSL certificates</h3>
      <p class="fl-detail" i18n>
        Fleio can connect to the OpenStack APIs using SSL. This option will also try to
        verify the certificate validity using the Mozilla CA Bundle. We recommend that you
        install valid SSL certificates for your APIs.
      </p>
      <h3 i18n>API Certificate</h3>
      <p class="fl-detail" i18n>
        You can specify a custom certificate here. This will be used to connect to OpenStack API.
      </p>
      <p i18n>
        Saving the settings will launch a process that will sync OpenStack resources with Fleio.
      </p>
    </div>
  </div>
  <div layoutDirection="row" layoutAlign="end" appLayoutGap="10px" layoutDirection-xs="column">
    <a mat-button class="fl-margin-top" (click)="test()" i18n>Test connection</a>
    <a mat-button class="fl-margin-top" (click)="getOpenrcFile()" i18n>
      Get openrc file
    </a>
    <a mat-button class="fl-margin-top" [color]="'primary'" (click)="saveAndSync()">
      {{ credentialsForm.dirty ? saveTxt : syncTxt }}
    </a>
  </div>
</div>
