{{ define "main" }}
<div>
  <div class="tabs">
    <a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
    <a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
  </div>
  <div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
    <table class="clickable-rows no-space">
      <thead>
        <tr>
          <th>Path</th>
          <th>Updated</th>
          <th>Locked</th>
        </tr>
      </thead>
      <tbody>
        {{ range .States }}
        <tr>
          <td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
          <td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
          <td>
            <a href="/states/{{ .Id }}">
              {{ if eq .Lock nil }}no{{ else }}
              <span>yes</span>
              <div class="tooltip left max">
                <b>Lock</b>
                <p>{{ .Lock }}</p>
              </div>
              {{ end }}
            </a>
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
  <div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
    <form action="/states" enctype="multipart/form-data" method="post">
      <fieldset>
        <div class="field border label{{ if .PathError }} invalid{{ end }}">
          <input autofocus
                 id="path"
                 name="path"
                 required
                 type="text"
                 value="{{ .Path }}">
          <label for="path">Path</label>
          {{ if .PathDuplicate }}
          <span class="error">This path already exist</span>
          {{ else if .PathError }}
          <span class="error">Invalid path</span>
          {{ else }}
          <span class="helper">Valid URL path beginning with a /</span>
          {{ end }}
        </div>
        <div class="field label border">
          <input name="file"
                 required
                 type="file">
          <input type="text">
          <label>File</label>
          <span class="helper">JSON state file</span>
        </div>
        <button class="small-round" type="submit" value="submit">New</button>
      </fieldset>
    </form>
  </div>
</div>
{{ end }}