<div data-ops-fragment>
  <% if (!reasons || !reasons.length) { %>
    <section class="kt-ops-empty">
      <span class="kt-ops-empty__icon"><i class="ti ti-flag-off"></i></span>
      <span class="kt-ops-eyebrow"><%= i18n.__('productReports.noResults') %></span>
      <h2><%= i18n.__('productReports.emptyReasons') %></h2>
      <p><%= i18n.__('productReports.emptyReasonsHint') %></p>
      <a class="kt-ops-btn kt-ops-btn--primary" href="/dashboard/product-report-reasons/create">
        <i class="ti ti-plus"></i><span><%= i18n.__('productReports.addReason') %></span>
      </a>
    </section>
  <% } else { %>
    <div class="kt-product-reporting__reason-grid" role="list">
      <%- include('./tds.ejs', { reasons }) %>
    </div>
    <footer class="kt-ops-resource__footer">
      <span><%= i18n.__('operationsContent.records') %>: <strong><%= total %></strong></span>
      <nav aria-label="<%= i18n.__('operationsContent.paginationSummary') %>"><%- paginationHtml || '' %></nav>
    </footer>
  <% } %>
</div>
