<div data-ops-fragment>
  <% if (!notifications.length) { %>
    <%- include('../systemFinance/empty.ejs', { icon: 'ti-bell-off', heading: i18n.__('systemFinance.noData'), description: i18n.__('systemFinance.noNotifications'), addUrl: '/dashboard/notifications/index', addLabel: i18n.__('systemFinance.send') }) %>
  <% } else { %>
    <div class="kt-ops-list-controls"><label class="kt-ops-list-controls__selection"><input class="kt-ops-check" type="checkbox" data-ops-select-all><span><%= i18n.__('systemFinance.selectAll') %></span></label></div>
    <div class="kt-ops-list">
      <% notifications.forEach((item) => { %>
        <article class="kt-ops-row kt-ops-row--finance kt-finance-notification-row <%= item.status === 'seen' ? 'kt-ops-row--info is-seen' : 'kt-ops-row--warning is-unread' %>" data-ops-row data-ops-row-id="<%= item.notificationId %>">
          <input class="kt-ops-check" type="checkbox" value="<%= item.notificationId %>" data-ops-row-checkbox aria-label="<%= i18n.__('systemFinance.selectRecord') %>">
          <div class="kt-ops-row__identity"><span class="kt-ops-avatar kt-finance-notification-row__avatar"><i class="ti <%= item.status === 'seen' ? 'ti-mail-opened' : 'ti-bell-ringing' %>"></i></span><div class="kt-ops-row__copy"><span class="kt-ops-row__eyebrow"><i class="ti ti-user-shield"></i><%= item.sendInfo?.senderName || item.senderName || '-' %></span><h3 class="kt-ops-row__title"><%= item.title || '-' %></h3><p class="kt-ops-row__subtitle kt-finance-notification-row__message"><%= item.message || '-' %></p></div></div>
          <div class="kt-ops-meta"><span class="kt-ops-meta__label"><%= i18n.__('systemFinance.status') %></span><span class="kt-ops-status <%= item.status === 'seen' ? 'kt-ops-status--muted' : 'kt-ops-status--warning' %>"><%= item.status || '-' %></span></div>
          <div class="kt-ops-meta"><span class="kt-ops-meta__label"><%= i18n.__('systemFinance.createdAt') %></span><time><%= item.timeAdd || '-' %></time></div>
          <div class="kt-ops-meta"><span class="kt-ops-meta__label"><%= i18n.__('systemFinance.reference') %></span><strong><%= item.key || '-' %></strong></div>
          <div class="kt-ops-row__actions">
            <a class="kt-ops-action" href="/dashboard/notifications/show/<%= item.notificationId %>"><i class="ti ti-eye"></i><%= i18n.__('systemFinance.view') %></a>
            <% if (item.isClickable) { %><a class="kt-ops-action" href="<%= item.url %>"><i class="ti ti-external-link"></i><%= i18n.__('systemFinance.openRelated') %></a><% } %>
            <button class="kt-ops-action kt-ops-action--danger" type="button" data-ops-delete data-ops-delete-id="<%= item.notificationId %>"><i class="ti ti-trash"></i><%= i18n.__('systemFinance.delete') %></button>
          </div>
        </article>
      <% }) %>
    </div>
    <% if (paginationHtml) { %><footer class="kt-ops-resource__footer"><nav aria-label="<%= i18n.__('systemFinance.pagination') %>"><%- paginationHtml %></nav></footer><% } %>
  <% } %>
</div>
