{{ extends "_layouts/default" }}
{{ import "_modules/form" }}

{{ block style() }}
<link rel="stylesheet" href="/assets/dragula/dragula.min.css?v=2.7.2">
{{ end }}

{{ block script() }}
<script>var charts = {{ writeJson(.Charts) }};</script>
<script src="/assets/echarts/echarts.min.js?v=4.0.4"></script>
<script src="/assets/dragula/dragula.min.js?v=2.7.2"></script>
<script>$(() => new Swirl.IndexPage())</script>
{{ end }}

{{ block infobox(style, icon, text, url, count) }}
<div class="column">
  <div class="box">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item has-text-centered">
          <span class="icon infobox has-text-grey"><i class="fas fa-{{icon}} fa-4x"></i></span>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item has-text-centered">
          <div>
            <p class="heading">{{text}}</p>
            <p class="title"><a href="{{url}}">{{count}}</a></p>
          </div>
        </div>
      </div>
    </nav>
  </div>
</div>
{{end}}

{{ block progress(title, percent) }}
<span class="is-pulled-left is-size-7">{{title}}</span><span class="is-pulled-right is-size-7">{{percent}}%</span>
<progress class="progress is-narrow{{if percent >= 95}} is-success{{else if percent >= 50}} is-warning{{else if percent > 0}} is-danger{{end}}" value="{{percent}}" max="100">30%</progress>
{{end}}

{{ block body() }}
{*{{ if !.Charts }}*}
<section class="hero is-primary is-bold">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-2">
        SWIRL <span class="tag is-success">v{{ version }}({{ go_version }})</span>
      </h1>
      <h2 class="subtitle is-5">{{ i18n("description") }}</h2>
      <p>
        <a class="button is-primary is-rounded" href="https://github.com/cuigh/swirl" target="_blank">
          <span class="icon">
            <i class="fab fa-github"></i>
          </span>
          <span>GitHub</span>
        </a>
      </p>
    </div>
  </div>
</section>
{*{{ end }}*}

<section class="hero is-light is-small">
  <div class="hero-body">
    <div class="columns">
      {{yield infobox(style="success", icon="cubes", text=i18n("home.node"), url="/node/", count=.NodeCount)}}
      {{yield infobox(style="info", icon="globe", text=i18n("home.network"), url="/network/", count=.NetworkCount)}}
      {{yield infobox(style="danger", icon="ticket-alt", text=i18n("home.service"), url="/service/", count=.ServiceCount)}}
      {{yield infobox(style="primary", icon="server", text=i18n("home.stack"), url="/stack/", count=.StackCount)}}
    </div>
  </div>
</section>

<section class="hero is-small">
  <div class="hero-body">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          <p class="subtitle is-5">
            <strong>{{ i18n("home.monitor") }}</strong>
          </p>
        </div>
        <div class="level-item">
          <div class="field has-addons">
            <p class="control">
              <a class="button is-static">Time</a>
            </p>
            <p class="control">
              <div class="select">
                <select id="cb-time">
                  <option value="30" selected>Last 30 minutes</option>
                  <option value="60">Last 1 hour</option>
                  <option value="180">Last 3 hours</option>
                  <option value="360">Last 6 hours</option>
                  <option value="720">Last 12 hours</option>
                  <option value="1440">Last 24 hours</option>
                </select>
              </div>
            </p>
          </div>
        </div>
      </div>
      <div class="level-right">
        <div class="level-item">
          <div class="buttons has-addons">
            <button id="btn-add" class="button">
              <span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
            </button>
            <button id="btn-save" class="button">
              <span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
            </button>
          </div>
        </div>
      </div>
    </nav>
    <div id="div-charts" class="columns is-multiline"></div>
  </div>
</section>

<div id="dlg-add-chart" class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Add chart</p>
      <button class="delete"></button>
    </header>
    <section class="modal-card-body" style="max-height: 400px; overflow-y: auto">
      <nav id="nav-charts" class="panel">
        <div class="panel-block">
          <p class="control has-icons-left">
            <input id="txt-query" class="input is-small" type="text" placeholder="Searching chart...">
            <span class="icon is-small is-left">
              <i class="fas fa-search"></i>
            </span>
          </p>
        </div>
      </nav>
    </section>
    <footer class="modal-card-foot">
      <button id="btn-add-chart" type="button" class="button is-primary">{{ i18n("button.confirm") }}</button>
      <button type="button" class="button dismiss">{{ i18n("button.cancel") }}</button>
    </footer>
  </div>
</div>
{{ end }}