<%
  const isArabic = lang !== 'en';
  const providerItems = Array.isArray(providers) ? providers : [];
  const fragmentStatus = typeof type === 'string' ? type : 'all';
%>

<div
  class="kt-provider-directory"
  data-provider-directory
  data-provider-directory-count="<%= providerItems.length %>"
  data-provider-directory-status="<%= fragmentStatus %>"
  aria-busy="false"
>
  <span class="kt-provider-progress" aria-hidden="true" data-provider-progress></span>

  <% if (providerItems.length) { %>
    <div class="kt-provider-selection">
      <label class="kt-provider-check kt-provider-check--all">
        <input type="checkbox" data-provider-select-all>
        <span aria-hidden="true"><i class="ti ti-check"></i></span>
        <em>
          <%= isArabic
            ? 'تحديد كل مقدمي الخدمات المعروضين'
            : 'Select all visible providers' %>
        </em>
      </label>
      <p>
        <i class="ti ti-shield-lock" aria-hidden="true"></i>
        <%= isArabic
          ? 'تُنفّذ تغييرات الوصول بعد تأكيد الخادم فقط.'
          : 'Access changes are applied only after server confirmation.' %>
      </p>
    </div>

    <div class="kt-provider-list" data-provider-list>
      <%- include('./tds.ejs', { providers: providerItems }) %>
    </div>

    <% if (typeof paginationHtml !== 'undefined' && paginationHtml) { %>
      <div class="kt-provider-pagination" data-provider-pagination>
        <%- paginationHtml %>
      </div>
    <% } %>
  <% } else { %>
    <div class="kt-provider-empty" data-provider-empty>
      <span class="kt-provider-empty__visual" aria-hidden="true">
        <i class="ti ti-building-store"></i>
        <b></b>
        <b></b>
      </span>
      <div>
        <h3 data-provider-empty-title>
          <%= isArabic ? 'لا يوجد مقدمو خدمات في هذه القائمة' : 'No providers in this list' %>
        </h3>
        <p data-provider-empty-text>
          <%= isArabic
            ? 'ستظهر الحسابات المطابقة للحالة المحددة هنا.'
            : 'Provider accounts matching the selected state will appear here.' %>
        </p>
      </div>
    </div>
  <% } %>
</div>
