<div class="modal-header">
  <h4 i18n="form title|Example: Create Pool@@formTitle"
      class="modal-title pull-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
  <button type="button"
          class="close pull-right"
          aria-label="Close"
          (click)="bsModalRef.hide()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<form class="form-horizontal"
      #frm="ngForm"
      [formGroup]="formGroup"
      novalidate>
  <div class="modal-body">

    <!-- Username -->
    <div class="form-group"
         [ngClass]="{'has-error': formGroup.showError('uid', frm)}">
      <label class="control-label col-sm-3"
             for="uid"
             i18n>Username</label>
      <div class="col-sm-9">
        <input id="uid"
               class="form-control"
               type="text"
               formControlName="uid"
               [readonly]="true">
      </div>
    </div>

    <!-- Subuser -->
    <div class="form-group"
         [ngClass]="{'has-error': formGroup.showError('subuid', frm)}">
      <label class="control-label col-sm-3"
             for="subuid">
        <ng-container i18n>Subuser</ng-container>
        <span class="required"
              *ngIf="!editing">
        </span>
      </label>
      <div class="col-sm-9">
        <input id="subuid"
               class="form-control"
               type="text"
               formControlName="subuid"
               [readonly]="editing"
               autofocus>
        <span class="help-block"
              *ngIf="formGroup.showError('subuid', frm, 'required')"
              i18n>This field is required.</span>
        <span class="help-block"
              *ngIf="formGroup.showError('subuid', frm, 'subuserIdExists')"
              i18n>The chosen subuser ID is already in use.</span>
      </div>
    </div>

    <!-- Permission -->
    <div class="form-group"
         [ngClass]="{'has-error': formGroup.showError('perm', frm)}">
      <label class="control-label col-sm-3"
             for="perm">
        <ng-container i18n>Permission</ng-container>
        <span class="required"></span>
      </label>
      <div class="col-sm-9">
        <select id="perm"
                class="form-control"
                formControlName="perm">
          <option i18n
                  [ngValue]="null">-- Select a permission --</option>
          <option *ngFor="let perm of ['read', 'write']"
                  [value]="perm">
            {{ perm }}
          </option>
          <option i18n
                  value="read-write">read, write</option>
          <option i18n
                  value="full-control">full</option>
        </select>
        <span class="help-block"
              *ngIf="formGroup.showError('perm', frm, 'required')"
              i18n>This field is required.</span>
      </div>
    </div>

    <!-- Swift key -->
    <fieldset *ngIf="!editing">
      <legend i18n>Swift key</legend>

      <!-- Auto-generate key -->
      <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
          <div class="checkbox checkbox-primary">
            <input id="generate_secret"
                   type="checkbox"
                   formControlName="generate_secret">
            <label for="generate_secret"
                   i18n>Auto-generate secret</label>
          </div>
        </div>
      </div>

      <!-- Secret key -->
      <div class="form-group"
           [ngClass]="{'has-error': formGroup.showError('secret_key', frm)}"
           *ngIf="!editing && !formGroup.getValue('generate_secret')">
        <label class="control-label col-sm-3"
               for="secret_key">
          <ng-container i18n>Secret key</ng-container>
          <span class="required"></span>
        </label>
        <div class="col-sm-9">
          <div class="input-group">
            <input id="secret_key"
                   class="form-control"
                   type="password"
                   formControlName="secret_key">
            <span class="input-group-btn">
              <button type="button"
                      class="btn btn-default"
                      cdPasswordButton="secret_key">
              </button>
              <button type="button"
                      class="btn btn-default"
                      cdCopy2ClipboardButton="secret_key">
              </button>
            </span>
          </div>
          <span class="help-block"
                *ngIf="formGroup.showError('secret_key', frm, 'required')"
                i18n>This field is required.</span>
        </div>
      </div>

    </fieldset>

  </div>
  <div class="modal-footer">
    <cd-submit-button
      (submitAction)="onSubmit()"
      i18n="form action button|Example: Create Pool@@formActionButton"
      [form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
    <cd-back-button [back]="bsModalRef.hide"></cd-back-button>
  </div>
</form>
