{{ extends "_base" }}

{{ block script() }}
<script>$(() => new Swirl.Metric.ListPage())</script>
{{ end }}

{{ block body_content() }}
<section class="section">
  <nav class="level">
    <!-- Left side -->
    <div class="level-left">
      <div class="level-item">
        <div class="control has-icons-left">
          <input id="txt-query" class="input" type="text" placeholder="Search by name, title and description">
          <span class="icon is-small is-left">
            <i class="fas fa-search"></i>
          </span>
        </div>
      </div>
      <div class="level-item">
        <p class="subtitle is-5">
          <strong>{{ len(.Charts) }}</strong>
          <span class="is-lowercase">{{ i18n("menu.chart") }}</span>
        </p>
      </div>      
    </div>
    <!-- Right side -->
    <div class="level-right">
      <p class="level-item">
        <a href="new" class="button is-success"><span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
      </p>
      <p class="level-item">
        <button id="btn-import" class="button is-info"><span class="icon"><i class="fas fa-level-down-alt"></i></span><span>{{ i18n("button.import") }}</span></button>
      </p>
    </div>
  </nav>
    <div id="div-charts" class="columns is-multiline">
      {{ range .Charts }}
      <div class="column is-3" data-name="{{ .Name }}" data-title="{{ .Title }}" data-desc="{{ .Description }}">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">{{ .Name }} - {{ .Width }}X{{ .Height }}</p>
            <p class="card-header-icon">
              <span class="icon">
                {{ if .Dashboard == "home" }}
                <i class="fas fa-home"></i>
                {{ else if .Dashboard == "service" }}
                <i class="fas fa-ticket-alt"></i>
                {{ else if .Dashboard == "task" }}
                <i class="fas fa-tasks"></i>
                {{ end }}
              </span>
            </p>
          </header>
          <div class="card-content">
            <article class="media">
              <figure class="media-left">
                {{ if .Type == "gauge" }}
                <i class="fas fa-tachometer-alt fa-4x"></i>
                {{ else }}
                <i class="fas fa-chart-{{ .Type }} fa-4x"></i>
                {{ end }}
              </figure>
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>{{ .Title }}</strong>
                    <br>
                    {{ .Description }}
                  </p>
                </div>
              </div>
            </article>
          </div>
          <footer class="card-footer">
            <a data-action="export-chart" class="card-footer-item">{{ i18n("button.export") }}</a>
            <a href="{{ .Name }}/edit" class="card-footer-item">{{ i18n("button.edit") }}</a>
            <a data-action="delete-chart" class="card-footer-item">{{ i18n("button.delete") }}</a>
          </footer>
        </div>
      </div>
      {{ end }}
    </div>
</section>
{{ end }}