{{ 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">
        Another Docker Swarm Management System.
      </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>Fork me</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="Nodes", url="/node/", count=.NodeCount)}}
    {{yield infobox(style="info", icon="globe", text="Networks", url="/network/", count=.NetworkCount)}}
    {{yield infobox(style="danger", icon="ticket", text="Services", url="/service/", count=.ServiceCount)}}
    {{yield infobox(style="primary", icon="server", text="Stacks", url="/stack/task/", count=.StackCount)}}
  </div>
  <hr>
  <h3 class="title is-5">Features</h3>
  <div class="columns">
    <div class="column is-4">
      <div class="card is-fullwidth">
        <header class="card-header">
          <h4 class="card-header-title"><strong>Local</strong></h4>
        </header>
        <div class="card-content">
          {*{{yield progress(title="System", percent=0)}}*}
          {{yield progress(title="Image", percent=100)}}
          {{yield progress(title="Container", percent=35)}}
          {{yield progress(title="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>Swarm</strong></h4>
        </header>
        <div class="card-content">
          {{yield progress(title="Registry", percent=100)}}          
          {{yield progress(title="Node", percent=100)}}
          {{yield progress(title="Network", percent=100)}}
          {{yield progress(title="Service", percent=100)}}
          {{yield progress(title="Stack", percent=100)}}
          {{yield progress(title="Task", percent=100)}}
          {{yield progress(title="Secret", percent=100)}}
          {{yield progress(title="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>System</strong></h4>
        </header>
        <div class="card-content">
          {{yield progress(title="Profile", percent=100)}}
          {{yield progress(title="Role", percent=100)}}
          {{yield progress(title="User", percent=100)}}
          {{yield progress(title="Setting", percent=100)}}
          {{yield progress(title="Event", percent=80)}}
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}