{{ define "main" }}
<h1>States</h1>
<div class="flex-row" style="justify-content: space-between;">
  <div style="min-width: 240px;">
    <p>TfStated is currently managing {{ len .States }} states.</p>
    <p>Use this page to inspect the existing states.</p>
    <p>You also have the option to upload a state file in order to create a new one. This is equivalent to using the <code>state push</code> command of OpenTofu/Terraform on a brand new state.</p>
  </div>
  <form action="/states" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>New State</legend>
      <div class="grid-2">
        <label for="path">Path</label>
        <input autofocus
               class="flex-stretch"
               id="path"
               name="path"
               required
               type="text"
               value="{{ .Path }}">
        {{ if .PathDuplicate }}
        <span class="error">This path already exist</span>
        {{ else if .PathError }}
        <span class="error">A valid URL path beginning with a / is expected.</span>
        {{ end }}
        <label for="file" style="min-width: 120px">JSON state file</label>
        <input id="file"
               name="file"
               required
               type="file">
      </div>
      <button class="primary" type="submit" value="submit">Upload and Create State</button>
    </fieldset>
  </form>
</div>
<article aria-role="table" class="grid-3" style="margin-top: 16px; justify-items: stretch;">
  <span>Path</span>
  <span>Updated</span>
  <span>Locked</span>
  {{ range .States }}
  <a href="/states/{{ .Id }}">{{ .Path }}</a>
  <a href="/states/{{ .Id }}">{{ .Updated }}</a>
  <a href="/states/{{ .Id }}" style="text-align: center;">{{ if eq .Lock nil }}no{{ else }}yes{{ end }}</a>
  {{ end }}
</article>
{{ end }}