<%
  const isArabic = lang !== 'en';
%>

<div
  class="kt-provider-modal"
  role="dialog"
  aria-modal="true"
  aria-labelledby="provider-modal-title"
  aria-describedby="provider-modal-description"
  data-provider-modal
  hidden
>
  <button
    type="button"
    class="kt-provider-modal__backdrop"
    aria-label="<%= isArabic ? 'إغلاق نافذة التأكيد' : 'Close confirmation dialog' %>"
    data-provider-modal-close
    tabindex="-1"
  ></button>
  <section class="kt-provider-modal__panel" role="document">
    <button
      type="button"
      class="kt-provider-modal__close"
      aria-label="<%= isArabic ? 'إغلاق' : 'Close' %>"
      data-provider-modal-close
    >
      <i class="ti ti-x" aria-hidden="true"></i>
    </button>
    <span class="kt-provider-modal__icon" aria-hidden="true" data-provider-modal-icon>
      <i class="ti ti-alert-triangle"></i>
    </span>
    <div class="kt-provider-modal__copy">
      <h3 id="provider-modal-title" data-provider-modal-title></h3>
      <p id="provider-modal-description" data-provider-modal-description></p>
    </div>
    <div class="kt-provider-modal__actions">
      <button
        type="button"
        class="kt-provider-modal__button kt-provider-modal__button--cancel"
        data-provider-modal-close
      >
        <%= isArabic ? 'إلغاء' : 'Cancel' %>
      </button>
      <button
        type="button"
        class="kt-provider-modal__button kt-provider-modal__button--confirm"
        data-provider-modal-confirm
      >
        <i class="ti ti-check" aria-hidden="true" data-provider-modal-confirm-icon></i>
        <i class="ti ti-loader-2 kt-provider-modal__spinner" aria-hidden="true"></i>
        <span data-provider-modal-confirm-label><%= isArabic ? 'تأكيد' : 'Confirm' %></span>
      </button>
    </div>
  </section>
</div>

<div
  class="kt-provider-toast"
  role="status"
  aria-live="polite"
  data-provider-toast
  hidden
>
  <i class="ti ti-check" aria-hidden="true" data-provider-toast-icon></i>
  <span data-provider-toast-message></span>
</div>
