<div class="action-block is-rounded" data-test-recover-replication>
  <div class="action-block-info">
    <h4 class="title is-5 is-marginless">
      Recover
    </h4>
    <p>
      Attempt recovery if replication is in a bad state.
    </p>
  </div>

  <div class="action-block-action">
    <button
      type="button"
      class="button is-secondary"
      onclick={{action (mut this.isModalActive) true}}
      data-test-replication-action-trigger
    >
      Recover
    </button>
  </div>
</div>

<Modal
  @title="Begin recovery?"
  @onClose={{action (mut this.isModalActive) false}}
  @isActive={{this.isModalActive}}
  @type="warning"
  @showCloseButton={{true}}
>
  <section class="modal-card-body">
    <p>
      If replication is in an adverse state, we can begin recovery. This will attempt to recover to continue syncing.
    </p>
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button type="button" class="button is-primary" onclick={{action "onSubmit" "recover"}} data-test-recover-confirm-button>
      Recover
    </button>
    <button
      type="button"
      class="button is-secondary"
      onclick={{action (mut this.isModalActive) false}}
      data-test-recover-cancel-button
    >
      Cancel
    </button>
  </footer>
</Modal>