<!--
  Keeper import options rendered inside the parent import component's form. Shows the method
  selector, and in "direct" mode the email and region fields. The csv and json methods render no
  inputs here so they reuse the parent's file selector and textarea instead of duplicating them.
-->

<div [formGroup]="formGroup">
  <bit-form-field>
    <bit-label>{{ "method" | i18n }}</bit-label>
    <bit-select formControlName="method">
      @for (m of methods; track m.value) {
        <bit-option [value]="m.value" [label]="m.label | i18n" />
      }
    </bit-select>
  </bit-form-field>

  @if (method() === "direct") {
    <bit-form-field>
      <bit-label>{{ "keeperEmail" | i18n }}</bit-label>
      <input bitInput type="text" formControlName="email" />
      @if (emailHint(); as hint) {
        <bit-hint>{{ hint }}</bit-hint>
      }
    </bit-form-field>
    <bit-form-field>
      <bit-label>{{ "dataCenterLocation" | i18n }}</bit-label>
      <bit-select formControlName="region">
        @for (r of regions; track r) {
          <bit-option [value]="r.value" [label]="r.label" />
        }
      </bit-select>
    </bit-form-field>
  }

  <!-- Non-direct methods fall back to the file selector and textarea of the importer component -->
</div>
