{{ 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 is-uppercase">{{ i18n("node.title") }}</h1>
      <h2 class="subtitle is-5">{{ i18n("node.description") }}</h2>
    </div>
  </div>
</section>
<div class="container">
  <nav class="breadcrumb has-succeeds-separator is-small is-marginless" aria-label="breadcrumbs">
    <ul>
      <li><a href="/">{{ i18n("menu.home") }}</a></li>
      <li><a href="/node/">{{ i18n("menu.node") }}</a></li>
      <li class="is-active"><a>{{ i18n("menu.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">{{ i18n("menu.detail") }}</a>
      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/raw">{{ i18n("menu.raw") }}</a>
      <a class="navbar-item is-tab" href="/node/{{.Node.ID}}/edit">{{ i18n("menu.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">{{ i18n("field.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">{{ i18n("field.created-at") }}</dt>
          <dd>{{ time(.Node.CreatedAt) }}</dd>
          <dt class="has-text-left">{{ i18n("field.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">Address</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>{{ i18n("field.id") }}</th>
              <th>{{ i18n("field.status") }}</th>
              <th>{{ i18n("field.image") }}</th>
              <th>{{ i18n("field.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="fas fa-reply"></i></span>
      <span>{{ i18n("button.return") }}</span>
    </a>
  </div>
</section>
{{ end }}