<%- include('../systemFinance/assets.ejs') %>
<main class="kt-ops kt-finance" data-ops-page data-finance-page
  data-ops-csrf-token="<%= csrfToken %>"
  data-ops-loading="<%= i18n.__('systemFinance.loading') %>"
  data-ops-refreshing="<%= i18n.__('systemFinance.refreshing') %>"
  data-ops-load-error="<%= i18n.__('systemFinance.loadError') %>">
  <div class="kt-ops__stack">
    <%- include('../systemFinance/hero.ejs', {
      heading: i18n.__('payments.payments'),
      description: i18n.__('systemFinance.paymentsDescription'),
      icon: 'ti-credit-card',
      count: payments.length,
      primaryUrl: '/dashboard/payments/create',
      primaryLabel: i18n.__('common.add'),
      primaryIcon: 'ti-plus',
      backUrl: null
    }) %>

    <section class="kt-ops-toolbar" aria-label="<%= i18n.__('systemFinance.commandCenter') %>">
      <div class="kt-ops-toolbar__main">
        <span class="kt-ops-section-icon" aria-hidden="true"><i class="ti ti-credit-card-pay"></i></span>
        <div><h2><%= i18n.__('systemFinance.commandCenter') %></h2><p><%= i18n.__('systemFinance.commandHint') %></p></div>
      </div>
      <div class="kt-ops-toolbar__actions">
        <button class="kt-ops-btn" type="button" data-ops-refresh>
          <i class="ti ti-refresh" aria-hidden="true"></i><span><%= i18n.__('systemFinance.refresh') %></span>
        </button>
      </div>
    </section>

    <form action="/dashboard/payments?type=filter" method="get" data-ops-filter-form hidden>
      <input type="hidden" name="refresh" value="true">
    </form>

    <section class="kt-ops-resource" data-ops-resource aria-live="polite">
      <div class="kt-ops-loading" data-ops-loading hidden>
        <span class="kt-ops-loading__pill"><i class="kt-ops-loading__spinner"></i><span data-ops-loading-label><%= i18n.__('systemFinance.loading') %></span></span>
      </div>
      <%- include('./dataTable.ejs', { payments, paginationHtml }) %>
    </section>
  </div>
</main>
<%- include('../systemFinance/scripts.ejs') %>
