<div class="page-layout">
  {{#global-header class="page-header"}}
    <li class="is-active">
      {{#link-to "servers.index"}}Servers{{/link-to}}
    </li>
  {{/global-header}}
  {{#gutter-menu class="page-body"}}
    <section class="section">
      {{#if isForbidden}}
        {{partial "partials/forbidden-message"}}
      {{else}}
        {{#list-pagination
          source=sortedAgents
          size=pageSize
          page=currentPage as |p|}}
          {{#list-table
            source=p.list
            sortProperty=sortProperty
            sortDescending=sortDescending
            class="with-foot" as |t|}}
            {{#t.head}}
              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
              {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
              {{#t.sort-by prop="isLeader"}}Leader{{/t.sort-by}}
              {{#t.sort-by prop="address"}}Address{{/t.sort-by}}
              {{#t.sort-by prop="serfPort"}}port{{/t.sort-by}}
              {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
            {{/t.head}}
            {{#t.body as |row|}}
              {{server-agent-row data-test-server-agent-row agent=row.model}}
            {{/t.body}}
          {{/list-table}}
          <div class="table-foot">
            <nav class="pagination">
              <div class="pagination-numbers">
                {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAgents.length}}
              </div>
              {{#p.prev class="pagination-previous"}} &lt; {{/p.prev}}
              {{#p.next class="pagination-next"}} &gt; {{/p.next}}
              <ul class="pagination-list"></ul>
            </nav>
          </div>
        {{/list-pagination}}
        {{outlet}}
      {{/if}}
    </section>
  {{/gutter-menu}}
</div>
