{{ extends "base" }}
{{ import "../_modules/detail" }}
{{ 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.Service.StatsPage())</script>
{{ end }}

{{ block body_content() }}
<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="/service/">{{ i18n("menu.service") }}</a></li>
      <li class="is-active"><a>{{ i18n("menu.stats") }}</a></li>
    </ul>
  </nav>
</div>

<section class="hero is-small is-light">
  <div class="hero-body">
    <div class="container">
      <h2 id="h2-service-name" class="title is-2">{{ .Service.Spec.Name }}</h2>
    </div>
  </div>
</section>

<nav class="navbar has-shadow">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/detail">{{ i18n("menu.detail") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/raw">{{ i18n("menu.raw") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/logs">{{ i18n("menu.log") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/edit">{{ i18n("menu.edit") }}</a>
      <a class="navbar-item is-tab" href="/service/{{.Service.Spec.Name}}/perm">{{ i18n("menu.perm") }}</a>
      <a class="navbar-item is-tab is-active" href="/service/{{.Service.Spec.Name}}/stats">{{ i18n("menu.stats") }}</a>
    </div>
  </div>
</nav>

<section class="section">
  <div class="container">
    {{ if .Prometheus }}
    <nav class="level is-mobile">
      <form>
        <div class="level-left">
          <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" name="time">
                    {{ yield option(value="30", label="Last 30 minutes", selected=.Time) }}
                    {{ yield option(value="60", label="Last 1 hour", selected=.Time) }}
                    {{ yield option(value="180", label="Last 3 hours", selected=.Time) }}
                    {{ yield option(value="360", label="Last 6 hours", selected=.Time) }}
                    {{ yield option(value="720", label="Last 12 hours", selected=.Time) }}
                    {{ yield option(value="1440", label="Last 24 hours", selected=.Time) }}
                  </select>
                </div>
              </p>
            </div>
          </div>
          <div class="level-item">
            <div class="field">
              <input id="cb-refresh" name="refresh" value="true" type="checkbox" class="switch is-success is-rounded"{{if .Refresh}} checked{{end}}>
              <label for="cb-refresh">Auto refresh</label>
            </div>
          </div>
        </div>
      </form>
      <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>
            <button id="btn-save-as-default" class="button">
              <span class="icon"><i class="fas fa-save"></i></span><span>{{ i18n("button.save-as-default") }}</span>
            </button>
          </div>
        </div>
      </div>
    </nav>
    <div id="div-charts" class="columns is-multiline">
    </div>
    {{ else }}
    <div class="notification is-info">
      NOTICE: To enable this feature, you must set <b>Metrics</b> option on <a href="/system/setting/">Setting</a> page first.
    </div>
    {{ end }}

    <a href="/service/" class="button is-primary">
      <span class="icon"><i class="fas fa-reply"></i></span>
      <span>{{ i18n("button.return") }}</span>
    </a>
  </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 }}