<div class="container-header-text">
  <h3>{{t "modalRestoreBackup.title"}}</h3>
  <hr/>
</div>

<section class="p-20 pt-0">
  <div class="row">
    <div class="col span-6">
      <label
        class="acc-label"
        for="available-backups"
      >
        {{t "modalRestoreBackup.backups"}}{{field-required}}
      </label>
      {{#if loadingBackups}}
        <i class="icon icon-spinner icon-spin"></i>
        {{t "modalRestoreBackup.fetching"}}
      {{else}}
        <select
          id="available-backups"
          class="form-control"
          onchange={{action (mut backupId) value="target.value"}}
        >
          {{#unless (eq backupId value)}}
            <option
              value=""
              selected=true
            >
              {{t "modalRestoreBackup.select.all"}}
            </option>
          {{/unless}}
          {{#each availableBackups as |backup|}}
            <option
              value={{backup.id}}
              selected={{eq backup.id value}}
              disabled={{eq backup.state "activating"}}
            >
              {{backup.label}}
            </option>
          {{/each}}
        </select>
      {{/if}}
    </div>
  </div>
</section>

{{save-cancel
  editing=true
  save=(action "restore")
  saveDisabled=(not backupId)
  cancel=(action "cancel")
}}
