{{ define "main" }}
<main class="responsive" id="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>
</main>
{{ end }}