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

<div
  class="kt-join-modal"
  data-join-modal
  role="dialog"
  aria-modal="true"
  aria-labelledby="join-modal-title"
  aria-describedby="join-modal-description"
  hidden
>
  <button
    class="kt-join-modal__backdrop"
    type="button"
    tabindex="-1"
    aria-label="<%= isArabic ? 'إغلاق نافذة التأكيد' : 'Close confirmation' %>"
    data-join-modal-close
  ></button>

  <div class="kt-join-modal__dialog" role="document">
    <span class="kt-join-modal__icon" aria-hidden="true" data-join-modal-icon>
      <i class="ti ti-gavel"></i>
    </span>
    <div class="kt-join-modal__copy">
      <span class="kt-join-modal__eyebrow">
        <%= isArabic ? 'تأكيد قرار المراجعة' : 'Confirm review decision' %>
      </span>
      <h2 id="join-modal-title" data-join-modal-title></h2>
      <p id="join-modal-description" data-join-modal-description></p>
    </div>
    <div class="kt-join-modal__actions">
      <button
        type="button"
        class="kt-join-button kt-join-button--quiet"
        data-join-modal-close
      >
        <%= isArabic ? 'إلغاء' : 'Cancel' %>
      </button>
      <button
        type="button"
        class="kt-join-button kt-join-button--confirm"
        data-join-modal-confirm
      >
        <i class="ti ti-check" aria-hidden="true" data-join-modal-confirm-icon></i>
        <span data-join-modal-confirm-label><%= isArabic ? 'تأكيد' : 'Confirm' %></span>
      </button>
    </div>
  </div>
</div>

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