{{title "Client " (or model.name model.shortId)}}
<section class="section with-headspace">
  {{#if eligibilityError}}
    <div data-test-eligibility-error class="columns">
      <div class="column">
        <div class="notification is-danger">
          <h3 data-test-title class="title is-4">Eligibility Error</h3>
          <p data-test-message>{{eligibilityError}}</p>
        </div>
      </div>
      <div class="column is-centered is-minimum">
        <button data-test-dismiss class="button is-danger" onclick={{action (mut eligibilityError) ""}}>Okay</button>
      </div>
    </div>
  {{/if}}
  {{#if stopDrainError}}
    <div data-test-stop-drain-error class="columns">
      <div class="column">
        <div class="notification is-danger">
          <h3 data-test-title class="title is-4">Stop Drain Error</h3>
          <p data-test-message>{{stopDrainError}}</p>
        </div>
      </div>
      <div class="column is-centered is-minimum">
        <button data-test-dismiss class="button is-danger" onclick={{action (mut stopDrainError) ""}}>Okay</button>
      </div>
    </div>
  {{/if}}
  {{#if drainError}}
    <div data-test-drain-error class="columns">
      <div class="column">
        <div class="notification is-danger">
          <h3 data-test-title class="title is-4">Drain Error</h3>
          <p data-test-message>{{drainError}}</p>
        </div>
      </div>
      <div class="column is-centered is-minimum">
        <button data-test-dismiss class="button is-danger" onclick={{action (mut drainError) ""}}>Okay</button>
      </div>
    </div>
  {{/if}}
  {{#if showDrainStoppedNotification}}
    <div class="notification is-info">
      <div data-test-drain-stopped-notification class="columns">
        <div class="column">
          <h3 data-test-title class="title is-4">Drain Stopped</h3>
          <p data-test-message>The drain has been stopped and the node has been set to ineligible.</p>
        </div>
        <div class="column is-centered is-minimum">
          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainStoppedNotification) false}}>Okay</button>
        </div>
      </div>
    </div>
  {{/if}}
  {{#if showDrainUpdateNotification}}
    <div class="notification is-info">
      <div data-test-drain-updated-notification class="columns">
        <div class="column">
          <h3 data-test-title class="title is-4">Drain Updated</h3>
          <p data-test-message>The new drain specification has been applied.</p>
        </div>
        <div class="column is-centered is-minimum">
          <button data-test-dismiss class="button is-info" onclick={{action (mut showDrainUpdateNotification) false}}>Okay</button>
        </div>
      </div>
    </div>
  {{/if}}
  {{#if showDrainNotification}}
    <div class="notification is-info">
      <div data-test-drain-complete-notification class="columns">
        <div class="column">
          <h3 data-test-title class="title is-4">Drain Complete</h3>
          <p data-test-message>Allocations have been drained and the node has been set to ineligible.</p>
        </div>
        <div class="column is-centered is-minimum">
          <button data-test-dimiss class="button is-info" onclick={{action (mut showDrainNotification) false}}>Okay</button>
        </div>
      </div>
    </div>
  {{/if}}
  <div class="toolbar">
    <div class="toolbar-item is-top-aligned is-minimum">
      <span class="title">
        <span data-test-node-status="{{model.compositeStatus}}" class="node-status-light {{model.compositeStatus}}"></span>
      </span>
    </div>
    <div class="toolbar-item">
      <h1 data-test-title class="title with-subheading">
        {{or model.name model.shortId}}
      </h1>
      <p>
        <label class="is-interactive">
          {{#toggle
            data-test-eligibility-toggle
            isActive=model.isEligible
            isDisabled=(or setEligibility.isRunning model.isDraining (cannot "write client"))
            onToggle=(perform setEligibility (not model.isEligible))}}
            Eligible
          {{/toggle}}
          <span class="tooltip" aria-label="Only eligible clients can receive allocations">
            {{x-icon "info-circle-outline" class="is-faded"}}
          </span>
        </label>
        <span data-test-node-id class="tag is-hollow is-small no-text-transform">
          {{model.id}}
          {{copy-button clipboardText=model.id}}
        </span>
      </p>
    </div>
    <div class="toolbar-item is-right-aligned is-top-aligned">
      {{#if model.isDraining}}
        {{two-step-button
          data-test-drain-stop
          idleText="Stop Drain"
          cancelText="Cancel"
          confirmText="Yes, Stop"
          confirmationMessage="Are you sure you want to stop this drain?"
          awaitingConfirmation=stopDrain.isRunning
          onConfirm=(perform stopDrain)}}
      {{/if}}
    </div>
    <div class="toolbar-item is-right-aligned is-top-aligned">
      {{drain-popover
        client=model
        isDisabled=(cannot "write client")
        onDrain=(action "drainNotify")
        onError=(action "drainError")}}
    </div>
  </div>

  <div class="boxed-section is-small">
    <div class="boxed-section-body inline-definitions">
      <span class="label">Client Details</span>
      <span class="pair" data-test-status-definition>
        <span class="term">Status</span>
        <span class="status-text node-{{model.status}}">{{model.status}}</span>
      </span>
      <span class="pair" data-test-address-definition>
        <span class="term">Address</span>
        {{model.httpAddr}}
      </span>
      <span class="pair" data-test-datacenter-definition>
        <span class="term">Datacenter</span>
        {{model.datacenter}}
      </span>
      <span class="pair" data-test-driver-health>
        <span class="term">Drivers</span>
        {{#if model.unhealthyDrivers.length}}
          {{x-icon "warning" class="is-text is-warning"}}
          {{model.unhealthyDrivers.length}} of {{model.detectedDrivers.length}} {{pluralize "driver" model.detectedDrivers.length}} unhealthy
        {{else}}
          All healthy
        {{/if}}
      </span>
    </div>
  </div>

  {{#if model.drainStrategy}}
    <div data-test-drain-details class="boxed-section is-info">
      <div class="boxed-section-head">
        <div class="boxed-section-row">Drain Strategy</div>
        <div class="boxed-section-row">
          <div class="inline-definitions is-small">
            {{#if (not model.drainStrategy.hasNoDeadline)}}
              <span class="pair">
                <span class="term">Duration</span>
                {{#if model.drainStrategy.isForced}}
                  <span data-test-duration>--</span>
                {{else}}
                  <span data-test-duration class="tooltip" aria-label={{format-duration model.drainStrategy.deadline}}>
                    {{format-duration model.drainStrategy.deadline}}
                  </span>
                {{/if}}
              </span>
            {{/if}}
            <span class="pair">
              <span class="term">{{if model.drainStrategy.hasNoDeadline "Deadline" "Remaining"}}</span>
              {{#if model.drainStrategy.hasNoDeadline}}
                <span data-test-deadline>No deadline</span>
              {{else if model.drainStrategy.isForced}}
                <span data-test-deadline>--</span>
              {{else}}
                <span data-test-deadline class="tooltip" aria-label={{format-ts model.drainStrategy.forceDeadline}}>
                  {{moment-from-now model.drainStrategy.forceDeadline interval=1000 hideAffix=true}}
                </span>
              {{/if}}
            </span>
            <span data-test-force-drain-text class="pair">
              <span class="term">Force Drain</span>
              {{#if model.drainStrategy.isForced}}
                {{x-icon "warning" class="is-text is-warning"}} Yes
              {{else}}
                No
              {{/if}}
            </span>
            <span data-test-drain-system-jobs-text class="pair">
              <span class="term">Drain System Jobs</span>
              {{if model.drainStrategy.ignoreSystemJobs "No" "Yes"}}
            </span>
          </div>
          {{#if (not model.drainStrategy.isForced)}}
            <div class="pull-right">
              {{two-step-button
                data-test-force
                alignRight=true
                isInfoAction=true
                idleText="Force Drain"
                cancelText="Cancel"
                confirmText="Yes, Force Drain"
                confirmationMessage="Are you sure you want to force drain?"
                awaitingConfirmation=forceDrain.isRunning
                onConfirm=(perform forceDrain)}}
            </div>
          {{/if}}
        </div>
      </div>
      <div class="boxed-section-body">
        <div class="columns">
          <div class="column nowrap is-minimum">
            <div class="metric-group">
              <div class="metric is-primary">
                <h3 class="label">Complete</h3>
                <p data-test-complete-count class="value">{{model.completeAllocations.length}}</p>
              </div>
            </div>
            <div class="metric-group">
              <div class="metric">
                <h3 class="label">Migrating</h3>
                <p data-test-migrating-count class="value">{{model.migratingAllocations.length}}</p>
              </div>
            </div>
            <div class="metric-group">
              <div class="metric">
                <h3 class="label">Remaining</h3>
                <p data-test-remaining-count class="value">{{model.runningAllocations.length}}</p>
              </div>
            </div>
          </div>
          <div class="column">
            <h3 class="title is-4">Status</h3>
            {{#if model.lastMigrateTime}}
              <p data-test-status>{{moment-to-now model.lastMigrateTime interval=1000 hideAffix=true}} since an allocation was successfully migrated.</p>
            {{else}}
              <p data-test-status>No allocations migrated.</p>
            {{/if}}
          </div>
        </div>
      </div>
    </div>
  {{/if}}

  <div class="boxed-section">
    <div class="boxed-section-head is-hollow">
      Resource Utilization
    </div>
    <div class="boxed-section-body">
      <div class="columns">
        <div class="column">
          {{primary-metric resource=model metric="cpu"}}
        </div>
        <div class="column">
          {{primary-metric resource=model metric="memory"}}
        </div>
      </div>
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      <div>
        Allocations
        <button role="button" class="badge is-white" onclick={{action "setPreemptionFilter" false}} data-test-filter-all>
          {{model.allocations.length}}
        </button>
        {{#if preemptions.length}}
          <button role="button" class="badge is-warning" onclick={{action "setPreemptionFilter" true}} data-test-filter-preemptions>
            {{preemptions.length}} {{pluralize "preemption" preemptions.length}}
          </button>
        {{/if}}
      </div>
      {{search-box
        searchTerm=(mut searchTerm)
        onChange=(action resetPagination)
        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="with-foot" as |t|}}
          {{#t.head}}
            <th class="is-narrow"></th>
            {{#t.sort-by prop="shortId"}}ID{{/t.sort-by}}
            {{#t.sort-by prop="modifyIndex" title="Modify Index"}}Modified{{/t.sort-by}}
            {{#t.sort-by prop="createIndex" title="Create Index"}}Created{{/t.sort-by}}
            {{#t.sort-by prop="statusIndex"}}Status{{/t.sort-by}}
            {{#t.sort-by prop="job.name"}}Job{{/t.sort-by}}
            {{#t.sort-by prop="jobVersion"}}Version{{/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)
              data-test-allocation=row.model.id}}
          {{/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 data-test-client-events class="boxed-section">
    <div class="boxed-section-head">
      Client Events
    </div>
    <div class="boxed-section-body is-full-bleed">
      {{#list-table source=sortedEvents class="is-striped" as |t|}}
        {{#t.head}}
          <th class="is-2">Time</th>
          <th class="is-2">Subsystem</th>
          <th>Message</th>
        {{/t.head}}
        {{#t.body as |row|}}
          <tr data-test-client-event>
            <td data-test-client-event-time>{{format-ts row.model.time}}</td>
            <td data-test-client-event-subsystem>{{row.model.subsystem}}</td>
            <td data-test-client-event-message>
              {{#if row.model.message}}
                {{#if row.model.driver}}
                  <span class="badge is-secondary is-small">{{row.model.driver}}</span>
                {{/if}}
                {{row.model.message}}
              {{else}}
                <em>No message</em>
              {{/if}}
            </td>
          </tr>
        {{/t.body}}
      {{/list-table}}
    </div>
  </div>

  <div data-test-driver-status class="boxed-section">
    <div class="boxed-section-head">
      Driver Status
    </div>
    <div class="boxed-section-body">
      {{#list-accordion source=sortedDrivers key="name" as |a|}}
        {{#a.head buttonLabel="details" isExpandable=a.item.detected}}
          <div class="columns inline-definitions {{unless a.item.detected "is-faded"}}">
            <div class="column is-1">
              <span data-test-name>{{a.item.name}}</span>
            </div>
            <div class="column is-2">
              {{#if a.item.detected}}
                <span data-test-health>
                  <span class="color-swatch {{a.item.healthClass}}"></span>
                  {{if a.item.healthy "Healthy" "Unhealthy"}}
                </span>
              {{/if}}
            </div>
            <div class="column">
              <span class="pair">
                <span class="term">Detected</span>
                <span data-test-detected>{{if a.item.detected "Yes" "No"}}</span>
              </span>
              <span class="is-pulled-right">
                <span class="pair">
                  <span class="term">Last Updated</span>
                  <span data-test-last-updated class="tooltip" aria-label="{{format-ts a.item.updateTime}}">
                    {{moment-from-now a.item.updateTime interval=1000}}
                  </span>
                </span>
              </span>
            </div>
          </div>
        {{/a.head}}
        {{#a.body}}
          <p data-test-health-description class="message">{{a.item.healthDescription}}</p>
          <div data-test-driver-attributes class="boxed-section">
            <div class="boxed-section-head">
               {{capitalize a.item.name}} Attributes
            </div>
            {{#if a.item.attributes.attributesStructured}}
              <div class="boxed-section-body is-full-bleed">
                {{attributes-table
                  attributes=a.item.attributesShort
                  class="attributes-table"}}
              </div>
            {{else}}
              <div class="boxed-section-body">
                <div class="empty-message">
                  <h3 class="empty-message-headline">No Driver Attributes</h3>
                </div>
              </div>
            {{/if}}
          </div>
        {{/a.body}}
      {{/list-accordion}}
    </div>
  </div>

  <div class="boxed-section">
    <div class="boxed-section-head">
      Attributes
    </div>
    <div class="boxed-section-body is-full-bleed">
      {{attributes-table
        data-test-attributes
        attributes=model.attributes.attributesStructured
        class="attributes-table"}}
    </div>
    <div class="boxed-section-head">
      Meta
    </div>
    {{#if model.meta.attributesStructured}}
      <div class="boxed-section-body is-full-bleed">
        {{attributes-table
          data-test-meta
          attributes=model.meta.attributesStructured
          class="attributes-table"}}
      </div>
    {{else}}
      <div class="boxed-section-body">
        <div data-test-empty-meta-message class="empty-message">
          <h3 class="empty-message-headline">No Meta Attributes</h3>
          <p class="empty-message-body">This client is configured with no meta attributes.</p>
        </div>
      </div>
    {{/if}}
  </div>
</section>