{{ extends "_layouts/default" }}

{{ 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="notification is-{{style}}">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item has-text-centered">
          <span class="icon infobox"><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}}" style="text-decoration: none">{{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() }}
<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 }}</span>
      </h1>
      <h2 class="subtitle is-5">{{ i18n("description") }}</h2>
      <p>
        <a class="button is-primary" 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>

<section class="section">
  <div class="notification is-warning is-hidden">
    WARNING: Swirl is running on basic mode now, some features are disabled. You can enable full features by configuring database.
  </div>
  <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/task/", count=.StackCount)}}
  </div>
  <hr>
  <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>
    <div class="level-right">
      <div class="level-item">
        <button id="btn-add" class="button is-success">
          <span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.add") }}</span>
        </button>
      </div>
      <div class="level-item">
        <button id="btn-save" class="button is-info">
          <span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save") }}</span>
        </button>
      </div>
    </div>
  </nav>
  <div id="div-charts" class="columns is-multiline">
  </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 }}