<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog dialogSize="large">
    <ng-container bitDialogTitle>{{ title | i18n }}</ng-container>
    <div bitDialogContent class="tw-relative">
      <div
        *ngIf="showSpinner"
        class="tw-absolute tw-flex tw-h-full tw-w-full tw-items-center tw-justify-center tw-bg-text-contrast"
      >
        <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
      </div>
      <div class="tw-flex tw-gap-4 tw-pt-4">
        <bit-form-field class="tw-w-1/3">
          <bit-label for="secret-name">{{ "name" | i18n }}</bit-label>
          <input formControlName="name" bitInput />
        </bit-form-field>
        <bit-form-field class="tw-w-full">
          <bit-label>{{ "value" | i18n }}</bit-label>
          <textarea bitInput rows="4" formControlName="value"></textarea>
        </bit-form-field>
      </div>
      <bit-form-field>
        <bit-label>{{ "notes" | i18n }}</bit-label>
        <textarea bitInput rows="4" formControlName="notes"></textarea>
      </bit-form-field>

      <hr />

      <bit-form-field class="tw-mb-0 tw-mt-3">
        <bit-label>{{ "project" | i18n }}</bit-label>
        <bit-select bitInput name="project" formControlName="project">
          <bit-option value="" [label]="'selectPlaceholder' | i18n"></bit-option>
          <bit-option
            *ngFor="let p of projects"
            [icon]="p.id === this.newProjectGuid ? 'bwi-plus-circle' : ''"
            [value]="p.id"
            [label]="p.name"
          >
          </bit-option>
        </bit-select>
      </bit-form-field>

      <bit-form-field *ngIf="addNewProject == true">
        <bit-label>{{ "projectName" | i18n }}</bit-label>
        <input formControlName="newProjectName" maxlength="1000" bitInput />
      </bit-form-field>
    </div>
    <ng-container bitDialogFooter>
      <button type="submit" bitButton buttonType="primary" bitFormButton>
        {{ "save" | i18n }}
      </button>
      <button
        type="button"
        bitButton
        buttonType="secondary"
        bitFormButton
        bitDialogClose
        [disabled]="false"
      >
        {{ "cancel" | i18n }}
      </button>
      <button
        *ngIf="deleteButtonIsVisible"
        class="tw-ml-auto"
        type="button"
        bitIconButton="bwi-trash"
        buttonType="danger"
        bitFormButton
        (click)="openDeleteSecretDialog()"
      ></button>
    </ng-container>
  </bit-dialog>
</form>
