<div class="kt-ops-modal" data-ops-modal data-ops-delete-modal role="dialog" aria-modal="true"
  aria-labelledby="finance-delete-title" aria-describedby="finance-delete-description"
  aria-hidden="true" tabindex="-1" hidden>
  <section class="kt-ops-modal__dialog" data-ops-delete-dialog>
    <header class="kt-ops-modal__header">
      <div>
        <span class="kt-ops-eyebrow"><%= i18n.__('systemFinance.destructiveAction') %></span>
        <h2 id="finance-delete-title"><%= i18n.__('systemFinance.deleteTitle') %></h2>
        <p id="finance-delete-description"><%= i18n.__('systemFinance.deleteDescription') %></p>
      </div>
      <button type="button" class="kt-ops-modal__close" data-ops-modal-close
        aria-label="<%= i18n.__('systemFinance.close') %>"><i class="ti ti-x" aria-hidden="true"></i></button>
    </header>
    <div class="kt-ops-modal__body">
      <div class="kt-ops-detail">
        <span class="kt-ops-detail__label"><%= i18n.__('systemFinance.selectedRecords') %></span>
        <strong class="kt-ops-detail__value" data-ops-delete-count>1</strong>
      </div>
    </div>
    <footer class="kt-ops-modal__actions">
      <button type="button" class="kt-ops-btn" data-ops-modal-close><%= i18n.__('systemFinance.cancel') %></button>
      <button type="button" class="kt-ops-btn kt-ops-btn--danger" data-ops-delete-confirm
        data-ops-loading-label="<%= i18n.__('systemFinance.deleting') %>">
        <span class="kt-ops-btn__spinner" data-ops-button-spinner hidden></span>
        <span data-ops-button-label><%= i18n.__('systemFinance.confirmDelete') %></span>
      </button>
    </footer>
  </section>
</div>
