<cds-modal size="md"
           [open]="open"
           (overlaySelected)="closeModal()">
  <cds-modal-header (closeSelect)="closeModal()">
    <h3 cdsModalHeaderHeading
        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</h3>
  </cds-modal-header>
  <ng-container *cdFormLoading="loading">
    <section class="cds--modal-content">
      <form name="form"
            #formDir="ngForm"
            [formGroup]="form">

      <!-- FsName -->
      <div class="form-item">
        <cds-text-label for="fsName"
                        i18n
                        cdRequiredField="FS name"
                        [invalid]="!form.controls['fsName'].valid && (form.controls['fsName'].dirty)"
                        [invalidText]="fsNameError"
                        i18n-invalidText>FS name
          <input cdsText
                 placeholder="Name..."
                 i18n-placeholder
                 id="fsName"
                 name="fsName"
                 formControlName="fsName"
                 size="sm"
                 [invalid]="!form.controls['fsName'].valid && (form.controls['fsName'].dirty)"
                 autofocus>
        </cds-text-label>
        <ng-template #fsNameError>
          <span class="invalid-feedback"
                *ngIf="form.showError('fsName', formDir, 'required')"
                i18n>This field is required.</span>
        </ng-template>
      </div>

      <!-- UserId -->
      <div class="form-item">
        <cds-text-label for="userId"
                        i18n
                        cdRequiredField="User ID"
                        [helperText]="userIdHelperText"
                        [invalid]="!form.controls['userId'].valid && (form.controls['userId'].dirty)"
                        [invalidText]="userIdError"
                        i18n-invalidText>User ID
          <input cdsText
                 value="client."
                 readonly>

          <input cdsText
                 placeholder="Name..."
                 i18n-placeholder
                 id="userId"
                 name="userId"
                 formControlName="userId"
                 [invalid]="!form.controls['userId'].valid && (form.controls['userId'].dirty)">
        </cds-text-label>
        <ng-template #userIdHelperText>
          You can manage users from
          <a routerLink="/ceph-users"
             (click)="closeModal()">Ceph Users</a>
          page
        </ng-template>
        <ng-template #userIdError>
          <span class="invalid-feedback"
                *ngIf="form.showError('userId', formDir, 'required')"
                i18n>This field is required.</span>
        </ng-template>
      </div>

      <!-- Directory -->
      <div class="form-item">
        <cds-text-label for="directory"
                        i18n
                        cdRequiredField="Directory"
                        [invalid]="!form.controls['directory'].valid && (form.controls['directory'].dirty)"
                        [invalidText]="directoryError"
                        helperText="Path to restrict access to"
                        [skeleton]="directoryStore.isLoading"
                        i18n-invalidText
                        i18n-helperText>Directory
          <input cdsText
                 type="text"
                 [placeholder]="directoryStore.isLoading ? '' : 'Directory path'"
                 i18n-placeholder
                 id="directory"
                 name="directory"
                 formControlName="directory"
                 [skeleton]="directoryStore.isLoading"
                 [invalid]="!form.controls['directory'].valid && (form.controls['directory'].dirty)"
                 [ngbTypeahead]="search">
        </cds-text-label>
        <ng-template #directoryError>
          <span class="invalid-feedback"
                *ngIf="form.showError('directory', formDir, 'required')"
                i18n>This field is required.</span>
        </ng-template>
      </div>

      <!-- Permissions -->
      <div class="form-item">
        <fieldset>
          <label class="cds--label"
                 i18n>Permissions</label>
            <ng-container *ngFor="let permission of clientPermissions">
              <cds-checkbox i18n-label
                            [id]="permission.name"
                            [name]="permission.name"
                            [formControlName]="permission.name"
                            (checkedChange)="toggleFormControl($event, permission.name)">
              {{ permission.name | titlecase }}
              <cd-help-text *ngIf="permission.description">
                {{ permission.description }}
              </cd-help-text>
            </cds-checkbox>
          </ng-container>
        </fieldset>
        </div>
      </form>
    </section>
    <cd-form-button-panel (submitActionEvent)="onSubmit()"
                          [form]="form"
                          [submitText]="(action | titlecase)"
                          [modalForm]="true"></cd-form-button-panel>
  </ng-container>
</cds-modal>
