{{ extends "_base" }}
{{ import "../../_modules/form" }}

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

{{ block body_content() }}
<section class="section">
  <div class="container">
    <h2 class="title">{{ .Chart.Name ? "Edit" : "Create" }} chart</h2>
    <hr>
    <form method="post" data-form="ajax-json" data-url="/system/chart/">
      <div class="columns is-bottom-marginless">
        <div class="column is-6">
          <div class="field">
            <label class="label">{{ i18n("field.name") }}</label>
            <div class="control">
              <input name="name" value="{{ .Chart.Name }}" class="input" placeholder="Only lower-case letters and underscores are allowed" data-v-rule="native;regex" data-v-arg-regex="[a-z_]+" data-v-msg-regex="Only lower-case letters and underline are allowed." required{{if .Chart.Name}} readonly{{ end }}>
            </div>
          </div>
          <div class="field">
            <label class="label">{{ i18n("field.title") }}</label>
            <div class="control">
              <input name="title" value="{{ .Chart.Title }}" class="input" placeholder="Title" data-v-rule="native" required>
            </div>
          </div>
          <div class="field">
            <label class="label">{{ i18n("field.desc") }}</label>
            <div class="control">
              <input name="desc" value="{{ .Chart.Description }}" class="input" placeholder="Chart description">
            </div>
          </div>
        </div>
        <div class="column is-6">
          <div class="field">
            <label class="label">{{ i18n("field.width") }}</label>
            <div class="control">
              <span class="select">
                <select name="width" data-type="integer">
                  {{ yield option(value="1", selected=.Chart.Width) }}
                  {{ yield option(value="2", selected=.Chart.Width) }}
                  {{ yield option(value="3", selected=.Chart.Width) }}
                  {{ yield option(value="4", selected=.Chart.Width) }}
                  {{ yield option(value="5", selected=.Chart.Width) }}
                  {{ yield option(value="6", selected=.Chart.Width) }}
                  {{ yield option(value="7", selected=.Chart.Width) }}
                  {{ yield option(value="8", selected=.Chart.Width) }}
                  {{ yield option(value="9", selected=.Chart.Width) }}
                  {{ yield option(value="10", selected=.Chart.Width) }}
                  {{ yield option(value="11", selected=.Chart.Width) }}
                  {{ yield option(value="12", selected=.Chart.Width) }}
                </select>
              </span>
            </div>
          </div>
          <div class="field">
            <label class="label">{{ i18n("field.height") }}</label>
            <div class="control">
              <input name="height" value="{{ .Chart.Height }}"  class="input" placeholder="Height in pixel" data-type="integer" data-v-rule="native" required>
            </div>
          </div>
          <div class="field">
            <label class="label">{{ i18n("field.unit") }}</label>
            <div class="control">
              <span class="select">
                <select name="unit">
                  {{ yield option(value="", label="None", selected=.Chart.Unit) }}
                  <optgroup label="Percent">
                    {{ yield option(value="percent:100", label="0-100", selected=.Chart.Unit) }}
                    {{ yield option(value="percent:1", label="0.0-1.0", selected=.Chart.Unit) }}
                  </optgroup>
                  <optgroup label="Time">
                    {{ yield option(value="time:ns", label="Nanoseconds", selected=.Chart.Unit) }}
                    {{ yield option(value="time:µs", label="Microseconds", selected=.Chart.Unit) }}
                    {{ yield option(value="time:ms", label="Milliseconds", selected=.Chart.Unit) }}
                    {{ yield option(value="time:s", label="Seconds", selected=.Chart.Unit) }}
                    {{ yield option(value="time:m", label="Minutes", selected=.Chart.Unit) }}
                    {{ yield option(value="time:h", label="Hours", selected=.Chart.Unit) }}
                    {{ yield option(value="time:d", label="Days", selected=.Chart.Unit) }}
                  </optgroup>
                  <optgroup label="Size">
                    {{ yield option(value="size:bits", label="Bits", selected=.Chart.Unit) }}
                    {{ yield option(value="size:bytes", label="Bytes", selected=.Chart.Unit) }}
                    {{ yield option(value="size:kilobytes", label="Kilobytes", selected=.Chart.Unit) }}
                    {{ yield option(value="size:megabytes", label="Megabytes", selected=.Chart.Unit) }}
                    {{ yield option(value="size:gigabytes", label="Gigabytes", selected=.Chart.Unit) }}
                  </optgroup>
                </select>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="field">
        <label class="label">{{ i18n("field.type") }}</label>
        <div class="control">
          {{ yield radio(name="type", value="line", label="Line", checked=.Chart.Type) }}
          {{ yield radio(name="type", value="bar", label="Bar", checked=.Chart.Type) }}
          {{ yield radio(name="type", value="pie", label="Pie", checked=.Chart.Type) }}
          {{ yield radio(name="type", value="gauge", label="Gauge", checked=.Chart.Type) }}
          {*{{ yield radio(name="type", value="table", label="Table", checked=.Chart.Type) }}*}
        </div>
      </div>
      <div class="field">
        <label class="label">{{ i18n("field.dashboard") }}</label>
        <div class="control">
          {{ yield radio(name="dashboard", value="", label="Any", checked=.Chart.Dashboard) }}
          {{ yield radio(name="dashboard", value="home", label="Home", checked=.Chart.Dashboard) }}
          {{ yield radio(name="dashboard", value="service", label="Service", checked=.Chart.Dashboard) }}
          {*{{ yield radio(name="dashboard", value="task", label="Task", checked=.Chart.Dashboard) }}*}
        </div>
      </div>
      <fieldset>
        <legend class="lead is-5">Metrics</legend>
        <table id="table-metrics" class="table is-bordered is-narrow is-fullwidth is-marginless" data-name="metric">
          <thead>
            <tr>
              <th width="25%">Legend</th>
              <th>Query</th>
              <th width="50">
                <a class="button is-small is-outlined is-success" data-action="add-metric">
                  <span class="icon is-small">
                    <i class="fas fa-plus"></i>
                  </span>
                </a>
              </th>
            </tr>
          </thead>
          <tbody>
            {{ range i, c := .Chart.Metrics }}
            <tr>
              <td>
                <input name="metrics[{{i}}].legend" value="{{c.Legend}}" class="input is-small" placeholder="Legend expression for dataset, e.g. ${name}">
              </td>
              <td>
                <input name="metrics[{{i}}].query" value="{{c.Query}}" class="input is-small" placeholder="Prometheus query expression, for service dashboard, you can use '${service}' variable">
              </td>
              <td>
                <a class="button is-small is-outlined is-danger" data-action="delete-metric">
                  <span class="icon is-small">
                    <i class="far fa-trash-alt"></i>
                  </span>
                </a>
              </td>
            </tr>
            {{ end }}
          </tbody>
        </table>
      </fieldset>
      {{ yield form_submit(url="/system/chart/") }}
    </form>
  </div>
</section>
{{ end }}