<% payments.forEach((item) => { const available = item.status === 'available'; %>
  <article class="kt-ops-row kt-ops-row--simple <%= available ? 'kt-ops-row--success' : 'kt-ops-row--danger' %>"
    data-ops-row data-ops-row-id="<%= item.paymentId %>">
    <div class="kt-ops-row__identity">
      <span class="kt-ops-avatar" aria-hidden="true"><i class="ti <%= item.slug === 'cash' ? 'ti-cash' : item.slug === 'wallet' ? 'ti-wallet' : 'ti-credit-card' %>"></i></span>
      <div class="kt-ops-row__copy">
        <span class="kt-ops-row__eyebrow"><%= i18n.__('systemFinance.paymentIdentity') %></span>
        <h3 class="kt-ops-row__title"><%= item.paymentName || item.slug %></h3>
        <p class="kt-ops-row__subtitle"><%= item.slug %></p>
      </div>
    </div>
    <div class="kt-ops-meta">
      <span class="kt-ops-meta__label"><%= i18n.__('systemFinance.status') %></span>
      <span class="kt-ops-status <%= available ? 'kt-ops-status--success' : 'kt-ops-status--danger' %>">
        <%= available ? i18n.__('payments.available') : i18n.__('payments.unavailable') %>
      </span>
    </div>
    <div class="kt-ops-meta">
      <span class="kt-ops-meta__label"><%= i18n.__('systemFinance.createdAt') %></span>
      <time datetime="<%= item.createdAt %>"><%= item.createdAt %></time>
    </div>
    <div class="kt-ops-row__actions">
      <a class="kt-ops-action" href="/dashboard/payments/show/<%= item.paymentId %>">
        <i class="ti ti-eye" aria-hidden="true"></i><span><%= i18n.__('systemFinance.view') %></span>
      </a>
      <a class="kt-ops-action" href="/dashboard/payments/edit/<%= item.paymentId %>">
        <i class="ti ti-edit" aria-hidden="true"></i><span><%= i18n.__('systemFinance.edit') %></span>
      </a>
    </div>
  </article>
<% }) %>
