<app-callout type="info" *ngIf="vaultTimeoutPolicy">
  {{ "vaultTimeoutPolicyInEffect" | i18n: vaultTimeoutPolicyHours:vaultTimeoutPolicyMinutes }}
</app-callout>

<div [formGroup]="form">
  <div class="form-group">
    <label for="vaultTimeout">{{ "vaultTimeout" | i18n }}</label>
    <select
      id="vaultTimeout"
      name="VaultTimeout"
      formControlName="vaultTimeout"
      class="form-control"
    >
      <option *ngFor="let o of vaultTimeouts" [ngValue]="o.value">{{ o.name }}</option>
    </select>
    <small class="form-text text-muted">{{ "vaultTimeoutDesc" | i18n }}</small>
  </div>
  <div class="form-group row" *ngIf="showCustom" formGroupName="custom">
    <div class="col">
      <label for="hours">{{ "hours" | i18n }}</label>
      <input
        id="hours"
        class="form-control"
        type="number"
        min="0"
        name="hours"
        formControlName="hours"
      />
    </div>
    <div class="col">
      <label for="minutes">{{ "minutes" | i18n }}</label>
      <input
        id="minutes"
        class="form-control"
        type="number"
        min="0"
        max="59"
        name="minutes"
        formControlName="minutes"
      />
    </div>
  </div>
  <div class="form-group"></div>
  <!-- Styling fix -->
</div>
