<div class="action-block is-rounded" data-test-reindex-replication>
  <div class="action-block-info">
    <h4 class="title is-5 is-marginless">
      Reindex
    </h4>
    <p>
      Reindex the local data storage
    </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
    >
      Reindex
    </button>
  </div>
</div>
<Modal
  @title="Begin reindex?"
  @onClose={{action (mut this.isModalActive) false}}
  @isActive={{this.isModalActive}}
  @type="warning"
  @showCloseButton={{true}}
>
  <section class="modal-card-body">
    <p class="has-bottom-margin-m">
      Reindexing can cause a very long delay depending on the number and size of objects in the data store.
      {{if this.model.replicationAttrs.isPrimary "You should always re-index your secondary first."}}
    </p>
    <p>
      Progress will be shown, and you will
      {{if this.model.replicationAttrs.isPrimary "not"}}
      be able to use Vault during this time.
    </p>
  </section>
  <footer class="modal-card-foot modal-card-foot-outlined">
    <button type="button" class="button is-primary" onclick={{action "onSubmit" "reindex"}} data-test-reindex-confirm-button>
      Reindex
    </button>
    <button
      type="button"
      class="button is-secondary"
      onclick={{action (mut this.isModalActive) false}}
      data-test-reindex-cancel-button
    >
      Cancel
    </button>
  </footer>
</Modal>