{{ extends "../_layouts/default" }}
{{ import "../_modules/detail" }}

{{ block body() }}
<section class="hero is-info">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-2">
        NODE
      </h1>
      <h2 class="subtitle is-5">
        Nodes are instances of the Engine participating in a swarm.
      </h2>
    </div>
  </div>
</section>
<div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
      <li><a href="/">Dashboard</a></li>
      <li><a href="/node/">Nodes</a></li>
      <li class="is-active"><a>Detail</a></li>
    </ul>
  </nav>
</div>
<section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">
      <h2 class="title is-2">
        {{ .Node.Spec.Name ? .Node.Spec.Name : (.Node.Description.Hostname ? .Node.Description.Hostname : .Node.ID) }}
      </h2>
    </div>
  </div>
</section>

<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item is-tab is-active" href="/node/{{.Node.ID}}/detail">Detail</a>
      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">Raw</a>
      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">Edit</a>
    </div>
  </div>
</nav>

<section class="section">
  <div class="container">
    <div class="message is-primary">
      <div class="message-body">
        <dl class="is-horizontal is-marginless">
          <dt class="has-text-left">ID</dt>
          <dd>{{ .Node.ID }}</dd>
          <dt class="has-text-left">Hostname</dt>
          <dd>{{ .Node.Description.Hostname }}</dd>
          <dt class="has-text-left">Role</dt>
          <dd>{{ .Node.Spec.Role }}</dd>
          <dt class="has-text-left">Availability</dt>
          <dd>{{ .Node.Spec.Availability}}</dd>
          <dt class="has-text-left">Status</dt>
          <dd>{{ .Node.Status.State}}</dd>
          <dt class="has-text-left">Address</dt>
          <dd>{{ .Node.Status.Addr}}</dd>
          <dt class="has-text-left">Created at</dt>
          <dd>{{ time(.Node.CreatedAt) }}</dd>
          <dt class="has-text-left">Updated at</dt>
          <dd>{{ time(.Node.UpdatedAt) }}</dd>
        </dl>
      </div>
    </div>

    <div class="columns">
      <div class="column is-6">
        <p class="lead is-5">Description</p>
        <dl class="is-horizontal is-marginless">
          <dt class="has-text-left">CPU</dt>
          <dd>{{printf("%.0f", .Node.Description.Resources.NanoCPUs / 1000000000)}}</dd>
          <dt class="has-text-left">Memory</dt>
          <dd>{{printf("%.2f", .Node.Description.Resources.MemoryBytes / 1024 / 1024 / 1024)}} GB</dd>
          <dt class="has-text-left">Platform</dt>
          <dd>{{ .Node.Description.Platform.OS }}/{{ .Node.Description.Platform.Architecture }}</dd>
          <dt class="has-text-left">Version</dt>
          <dd>{{ .Node.Description.Engine.EngineVersion}}</dd>
        </dl>
      </div>
      {{if .Node.ManagerStatus}}
      <div class="column is-6">
        <p class="lead is-5">Manager status</p>
        <dl class="is-horizontal is-marginless">
          <dt class="has-text-left">Leader</dt>
          <dd>{{ .Node.ManagerStatus.Leader ? "Yes" : "No" }}</dd>
          <dt class="has-text-left">Reachability</dt>
          <dd>{{ .Node.ManagerStatus.Reachability }}</dd>
          <dt class="has-text-left">Addr</dt>
          <dd>{{ .Node.ManagerStatus.Addr}}</dd>
        </dl>
      </div>
      {{end}}
    </div>

    {{ yield tags(title="Labels", tags=.Node.Spec.Labels) }}

    {{if .Tasks}}
    <div class="block">
      <div class="block-header">
        <p>Tasks</p>
      </div>
      <div class="block-body is-paddingless">
        <table class="table is-bordered is-striped is-narrow is-fullwidth is-marginless">
          <thead>
            <tr>
              <th>ID</th>
              <th>Status</th>
              <th>Image</th>
              <th>Updated at</th>
            </tr>
          </thead>
          <tbody>
            {{range .Tasks}}
            <tr>
              <td><a href="/task/{{.ID}}/detail">{{.ID}}</a></td>
              <td><span class="tag is-{{ .Status.State == "running" ?  "success" : (.Status.State == "preparing" ? "warning": "danger") }}">{{ .Task.Status.State }}</span></td>
              <td>{{.Image}}</td>
              <td>{{time(.UpdatedAt)}}</td>
            </tr>
            {{end}}
          </tbody>
        </table>
      </div>
    </div>
    {{end}}

    <a href="/node/" class="button is-primary">
      <span class="icon"><i class="fa fa-reply"></i></span>
      <span>Return</span>
    </a>
  </div>
</section>
{{ end }}