<%
  const safeProducts = Array.isArray(products) ? products : [];
  const meta = paginationMeta || { page: 1, limit: 20, total: safeProducts.length, lastPage: 1 };
  const firstItem = meta.total > 0 ? ((meta.page - 1) * meta.limit) + 1 : 0;
  const lastItem = Math.min(meta.total, meta.page * meta.limit);
%>

<div
  class="kt-products-fragment"
  data-products-fragment
  data-stat-all="<%= stats.all %>"
  data-stat-pending="<%= stats.pending %>"
  data-stat-approved="<%= stats.approved %>"
  data-stat-rejected="<%= stats.rejected %>"
  data-stat-hidden="<%= stats.hidden %>"
  data-stat-deleted="<%= stats.deleted %>"
  data-stat-cancelled="<%= stats.cancelled %>"
>
  <% if (!safeProducts.length) { %>
    <section class="kt-products-empty" data-products-empty-state>
      <span class="kt-products-empty__art" aria-hidden="true">
        <i class="ti ti-package-off"></i><b></b><b></b><b></b>
      </span>
      <span class="kt-products-eyebrow"><%= i18n.__({ phrase: 'products.catalogNoResultsEyebrow', locale: lang }) %></span>
      <h2><%= i18n.__({ phrase: 'products.moderationNoProducts', locale: lang }) %></h2>
      <p><%= i18n.__({ phrase: 'products.catalogNoResultsDescription', locale: lang }) %></p>
      <div>
        <a class="kt-products-btn kt-products-btn--control" href="/dashboard/products">
          <i class="ti ti-filter-x"></i>
          <%= i18n.__({ phrase: 'products.moderationClearFilters', locale: lang }) %>
        </a>
      </div>
    </section>
  <% } else { %>
    <div class="kt-products-list" role="list" aria-label="<%= i18n.__({ phrase: 'products.catalogDirectoryTitle', locale: lang }) %>">
      <%- include('./tds.ejs', {
        products: safeProducts,
        permissions,
        lang,
        i18n,
        moment,
      }) %>
    </div>
    <footer class="kt-products-pagination">
      <span>
        <%= i18n.__(
          { phrase: 'products.catalogPaginationSummary', locale: lang },
          { first: firstItem, last: lastItem, total: meta.total },
        ) %>
      </span>
      <nav aria-label="<%= i18n.__({ phrase: 'products.productsPagination', locale: lang }) %>">
        <%- paginationHtml %>
      </nav>
    </footer>
  <% } %>
</div>
