{{ extends "_layouts/default" }}

{{ 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 is-huge"><i class="fa fa-{{icon}}"></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-medium 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 id="btn-add" class="button is-primary" href="https://github.com/cuigh/swirl" target="_blank">
          <span class="icon">
            <i class="fa fa-github"></i>
          </span>
          <span>GitHub</span>
        </a>
        {*<a id="btn-add" class="button is-success" href="https://cuigh.tech/swirl" target="_blank">*}
          {*<span class="icon">*}
            {*<i class="fa fa-book"></i>*}
          {*</span>*}
          {*<span>Document</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("dashboard.node"), url="/node/", count=.NodeCount)}}
    {{yield infobox(style="info", icon="globe", text=i18n("dashboard.network"), url="/network/", count=.NetworkCount)}}
    {{yield infobox(style="danger", icon="ticket", text=i18n("dashboard.service"), url="/service/", count=.ServiceCount)}}
    {{yield infobox(style="primary", icon="server", text=i18n("dashboard.stack"), url="/stack/task/", count=.StackCount)}}
  </div>
  <hr>
  <h3 class="title is-5">{{ i18n("dashboard.feature") }}</h3>
  <div class="columns">
    <div class="column is-4">
      <div class="card is-fullwidth">
        <header class="card-header">
          <h4 class="card-header-title"><strong>{{ i18n("menu.local") }}</strong></h4>
        </header>
        <div class="card-content">
          {{yield progress(title=i18n("menu.image"), percent=100)}}
          {{yield progress(title=i18n("menu.container"), percent=80)}}
          {{yield progress(title=i18n("menu.volume"), percent=100)}}
        </div>
      </div>
    </div>
    <div class="column is-4">
      <div class="card is-fullwidth">
        <header class="card-header">
          <h4 class="card-header-title"><strong>{{ i18n("menu.swarm") }}</strong></h4>
        </header>
        <div class="card-content">
          {{yield progress(title=i18n("menu.registry"), percent=100)}}
          {{yield progress(title=i18n("menu.node"), percent=100)}}
          {{yield progress(title=i18n("menu.network"), percent=100)}}
          {{yield progress(title=i18n("menu.service"), percent=100)}}
          {{yield progress(title=i18n("menu.stack"), percent=100)}}
          {{yield progress(title=i18n("menu.task"), percent=100)}}
          {{yield progress(title=i18n("menu.secret"), percent=100)}}
          {{yield progress(title=i18n("menu.config"), percent=100)}}
        </div>
      </div>
    </div>    
    <div class="column is-4">
      <div class="card is-fullwidth">
        <header class="card-header">
          <h4 class="card-header-title"><strong>{{ i18n("menu.system") }}</strong></h4>
        </header>
        <div class="card-content">
          {{yield progress(title=i18n("menu.profile"), percent=100)}}
          {{yield progress(title=i18n("menu.role"), percent=100)}}
          {{yield progress(title=i18n("menu.user"), percent=100)}}
          {{yield progress(title=i18n("menu.setting"), percent=100)}}
          {{yield progress(title=i18n("menu.event"), percent=80)}}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}