<form
  [formGroup]="formGroup"
  [bitSubmit]="submit"
  bit-dialog
  dialogSize="large"
  [loading]="loading"
  [title]="title | i18n"
  [subtitle]="subtitle"
>
  <div bitDialogContent class="tw-relative">
    <bit-tab-group [(selectedIndex)]="tabIndex">
      <bit-tab label="{{ 'nameValuePair' | i18n }}">
        <div class="tw-flex tw-gap-4 tw-pt-4">
          <bit-form-field class="tw-w-1/3">
            <bit-label>{{ "name" | i18n }}</bit-label>
            <input appAutofocus 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' : undefined"
              [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" bitInput />
        </bit-form-field>
      </bit-tab>

      <bit-tab label="{{ 'people' | i18n }}">
        <p>
          {{ "secretPeopleDescription" | i18n }}
        </p>
        <sm-access-policy-selector
          formControlName="peopleAccessPolicies"
          [addButtonMode]="false"
          [items]="peopleAccessPolicyItems"
          [label]="'people' | i18n"
          [hint]="'projectPeopleSelectHint' | i18n"
          [columnTitle]="'name' | i18n"
          [emptyMessage]="'secretPeopleEmptyMessage' | i18n"
        >
        </sm-access-policy-selector>
      </bit-tab>

      <bit-tab label="{{ 'machineAccounts' | i18n }}">
        <p>
          {{ "secretMachineAccountsDescription" | i18n }}
        </p>
        <sm-access-policy-selector
          formControlName="serviceAccountAccessPolicies"
          [addButtonMode]="false"
          [items]="serviceAccountAccessPolicyItems"
          [label]="'machineAccounts' | i18n"
          [hint]="'projectMachineAccountsSelectHint' | i18n"
          [columnTitle]="'machineAccounts' | i18n"
          [emptyMessage]="'secretMachineAccountsEmptyMessage' | i18n"
        >
        </sm-access-policy-selector>
      </bit-tab>
    </bit-tab-group>
  </div>

  <ng-container bitDialogFooter>
    <button [loading]="loading" type="submit" bitButton buttonType="primary" bitFormButton>
      {{ "save" | i18n }}
    </button>
    <button bitButton buttonType="secondary" type="button" bitDialogClose>
      {{ "cancel" | i18n }}
    </button>
    <button
      *ngIf="deleteButtonIsVisible"
      class="tw-ml-auto"
      [disabled]="loading"
      type="button"
      buttonType="dangerGhost"
      bitIconButton="bwi-trash"
      bitFormButton
      [label]="'delete' | i18n"
      [bitAction]="delete"
    ></button>
  </ng-container>
</form>
