<form [formGroup]="formGroup" [bitSubmit]="submit">
  <bit-dialog
    dialogSize="large"
    [disablePadding]="true"
    [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' : ''"
                [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="danger"
        bitIconButton="bwi-trash"
        bitFormButton
        [appA11yTitle]="'delete' | i18n"
        [bitAction]="delete"
      ></button>
    </ng-container>
  </bit-dialog>
</form>
