{{#global-header class="page-header"}}
  <a href="{{href-to "nodes"}}" class="breadcrumb">Nodes</a>
  <span class="breadcrumb">{{model.shortId}}</span>
{{/global-header}}
{{#gutter-menu class="page-body"}}
  <section class="section">
    <h1 class="title">
      <span class="node-status-light {{model.status}}"></span>
      {{or model.name model.shortId}}
      <span class="tag is-hollow is-small no-text-transform">{{model.id}}</span>
    </h1>

    <div class="boxed-section is-small">
      <div class="boxed-section-body inline-definitions">
        <span class="label">Client Details</span>
        <span class="pair"><span class="term">Status</span> <span class="status-text node-{{model.status}}">{{model.status}}</span></span>
        <span class="pair"><span class="term">Address</span> {{model.httpAddr}}</span>
        <span class="pair"><span class="term">Datacenter</span> {{model.datacenter}}</span>
      </div>
    </div>

    <div class="boxed-section">
      <div class="boxed-section-head">
        <div>Allocations <span class="badge is-white">{{model.allocations.length}}</span></div>
        {{search-box
          searchTerm=(mut searchTerm)
          placeholder="Search allocations..."
          class="is-inline pull-right"
          inputClass="is-compact"}}
      </div>
      <div class="boxed-section-body is-full-bleed">
        {{#list-pagination
          source=sortedAllocations
          size=pageSize
          page=currentPage as |p|}}
          {{#list-table
            source=p.list
            sortProperty=sortProperty
            sortDescending=sortDescending
            class="allocations with-foot" as |t|}}
            {{#t.head}}
              {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
              {{#t.sort-by prop="name"}}Name{{/t.sort-by}}
              {{#t.sort-by prop="clientStatus"}}Status{{/t.sort-by}}
              {{#t.sort-by prop="job.name"}}Job{{/t.sort-by}}
              <th>CPU</th>
              <th>Memory</th>
            {{/t.head}}
            {{#t.body as |row|}}
              {{allocation-row allocation=row.model context="node" onClick=(action "gotoAllocation" row.model)}}
            {{/t.body}}
          {{/list-table}}
          <div class="table-foot">
            <nav class="pagination">
              <div class="pagination-numbers">
                {{p.startsAt}}&ndash;{{p.endsAt}} of {{sortedAllocations.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}}
      </div>
    </div>

    <div class="boxed-section">
      <div class="boxed-section-head">
        Attributes
      </div>
      <div class="boxed-section-body is-full-bleed">
        {{attributes-table attributes=model.attributes.attributesStructured class="attributes-table"}}
      </div>
    </div>
  </section>
{{/gutter-menu}}