<%
  const isArabic = lang !== 'en';
  const queueType = ['all', 'wait', 'accept', 'reject'].includes(statusType)
    ? statusType
    : 'all';
  const queueItems = Array.isArray(providersMeta) ? providersMeta : [];
  const emptyCopy = {
    all: {
      title: isArabic ? 'لا توجد طلبات انضمام' : 'No join requests',
      text: isArabic
        ? 'ستظهر طلبات مقدمي الخدمات الجديدة هنا عند وصولها.'
        : 'New provider applications will appear here when submitted.',
    },
    wait: {
      title: isArabic ? 'لا توجد طلبات قيد الانتظار' : 'No pending requests',
      text: isArabic
        ? 'تمت مراجعة كل الطلبات التي كانت تحتاج إلى قرار.'
        : 'Every request that needed a decision has been reviewed.',
    },
    accept: {
      title: isArabic ? 'لا توجد طلبات مقبولة' : 'No accepted requests',
      text: isArabic
        ? 'ستظهر هنا الطلبات التي تمت الموافقة عليها.'
        : 'Approved provider requests will appear here.',
    },
    reject: {
      title: isArabic ? 'لا توجد طلبات مرفوضة' : 'No rejected requests',
      text: isArabic
        ? 'ستظهر هنا الطلبات التي انتهت بقرار رفض.'
        : 'Declined provider requests will appear here.',
    },
  }[queueType];
%>

<div
  class="kt-join-queue"
  data-join-queue-shell
  data-join-queue-status="<%= queueType %>"
  data-join-queue-count="<%= queueItems.length %>"
  aria-busy="false"
>
  <span class="kt-join-progress" aria-hidden="true" data-join-progress></span>

  <% if (queueItems.length) { %>
    <div class="kt-join-selection">
      <label class="kt-join-check kt-join-check--all">
        <input type="checkbox" data-join-select-all>
        <span aria-hidden="true"><i class="ti ti-check"></i></span>
        <em><%= isArabic ? 'تحديد كل الطلبات المعروضة' : 'Select all visible requests' %></em>
      </label>
      <p>
        <i class="ti ti-shield-check" aria-hidden="true"></i>
        <%= isArabic
          ? 'القرارات النهائية متاحة للطلبات المعلقة فقط.'
          : 'Final decisions are available for pending requests only.' %>
      </p>
    </div>

    <div class="kt-join-list" data-join-list>
      <%- include('./tds.ejs', { providersMeta: queueItems }) %>
    </div>

    <% if (typeof paginationHtml !== 'undefined' && paginationHtml) { %>
      <div class="kt-join-pagination"><%- paginationHtml %></div>
    <% } %>
  <% } else { %>
    <div class="kt-join-empty" data-join-empty>
      <span class="kt-join-empty__art" aria-hidden="true">
        <i class="ti ti-user-search"></i>
        <b></b>
        <b></b>
      </span>
      <div>
        <h3 data-join-empty-title><%= emptyCopy.title %></h3>
        <p data-join-empty-text><%= emptyCopy.text %></p>
      </div>
    </div>
  <% } %>
</div>
