<div class="pagination-counter" title="<%- @Ti(@title) %>">
  <span class="pagination-item-current"><%= @current_position %></span>/<span class="pagination-total-items"><%= @total_count %></span>
</div>
<ul class="pagination">
  <li <% if !@previous: %>class="disabled"<% end %> title="<%- @Ti( 'Previous in overview' ) %>">
    <a class="centered previous" href="<% if @previous: %><%- @previous.uiUrl() %><% end %>" data-id="<% if @previous: %><%- @previous.id %><% end %>">
      <% if @previous: %>
        <%- @Icon('arrow-left') %>
      <% else: %>
        <%- @Icon('arrow-left', 'arrow--disabled') %>
      <% end %>
    </a>
  <li <% if !@next: %>class="disabled"<% end %> title="<%- @Ti( 'Next in overview' ) %>">
    <a class="centered next" href="<% if @next: %><%- @next.uiUrl() %><% end %>" data-id="<% if @next: %><%- @next.id %><% end %>">
      <% if @next: %>
        <%- @Icon('arrow-right') %>
      <% else: %>
        <%- @Icon('arrow-right', 'arrow--disabled') %>
      <% end %>
    </a>
</ul>