{{#global-header class="page-header"}}
  <li class="is-active">
    {{#link-to "clients.index"}}Clients{{/link-to}}
  </li>
{{/global-header}}
{{#gutter-menu class="page-body"}}
  <section class="section">
    {{#if isForbidden}}
      {{partial "partials/forbidden-message"}}
    {{else}}
      {{#if nodes.length}}
        <div class="content">
          <div>{{search-box searchTerm=(mut searchTerm) placeholder="Search clients..."}}</div>
        </div>
      {{/if}}
      {{#list-pagination
        source=sortedNodes
        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="id"}}ID{{/t.sort-by}}
            {{#t.sort-by class="is-200px is-truncatable" prop="name"}}Name{{/t.sort-by}}
            {{#t.sort-by prop="status"}}Status{{/t.sort-by}}
            <th>Address</th>
            <th>Port</th>
            {{#t.sort-by prop="datacenter"}}Datacenter{{/t.sort-by}}
            <th># Allocs</th>
          {{/t.head}}
          {{#t.body as |row|}}
            {{client-node-row data-test-client-node-row node=row.model onClick=(action "gotoNode" row.model)}}
          {{/t.body}}
        {{/list-table}}
        <div class="table-foot">
          <nav class="pagination" data-test-pagination>
            <div class="pagination-numbers">
              {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedNodes.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>
      {{else}}
        <div class="empty-message" data-test-empty-clients-list>
          {{#if (eq nodes.length 0)}}
            <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Clients</h3>
            <p class="empty-message-body">
              The cluster currently has no client nodes.
            </p>
          {{else if searchTerm}}
            <h3 class="empty-message-headline" data-test-empty-clients-list-headline>No Matches</h3>
            <p class="empty-message-body">No clients match the term <strong>{{searchTerm}}</strong></p>
          {{/if}}
        </div>
    {{/list-pagination}}
    {{/if}}
  </section>
{{/gutter-menu}}