{{ define "main" }}
<h1>User Accounts</h1>
<div class="flex-row" style="justify-content:space-between;">
  <div style="min-width:240px;">
    <p>
      There are <strong>{{ len .Accounts }}</strong> user accounts.
      Use this page to inspect user accounts.
    </p>
  </div>
  {{ if .Page.Session.Data.Account.IsAdmin }}
  <form action="/accounts" enctype="multipart/form-data" method="post">
    <input name="csrf_token" type="hidden" value="{{ .Page.Session.Data.CsrfToken }}">
    <fieldset>
      <legend>New User Account</legend>
      <div class="grid-2">
        <label for="username" style="min-width:92px;">Username</label>
        <input {{ if or .UsernameDuplicate .UsernameInvalid }}class="error"{{ end }}
               id="username"
               name="username"
               required
               type="text"
               value="{{ .Username }}">
        <label for="is-admin">Is Admin</label>
        <input {{ if .IsAdmin }} checked{{ end }}
               id="is-admin"
               name="is-admin"
               type="checkbox"
               value="{{ .IsAdmin }}" />
      </div>
      {{ if .UsernameDuplicate }}
      <span class="error">This username already exist.</span>
      {{ else if .UsernameInvalid }}
      <span class="error">
        <span class="tooltip">
          Invalid username.
          <span class="tooltip-text">
            Username must start with a letter and be composed of only letters, numbers or underscores.
          </span>
        </span>
      </span>
      {{ end }}
      <div style="align-self:stretch; display:flex; justify-content:flex-end;">
        <button class="primary" type="submit" value="submit">Create User Account</button>
      </div>
    </fieldset>
  </form>
  {{ end }}
</div>
<article>
  <table style="width:100%;">
    <thead>
      <tr>
        <th>Username</th>
        <th>Created</th>
        <th>Last Login</th>
        <th>Is Admin</th>
      </tr>
    </thead>
    <tbody>
      {{ range .Accounts }}
      <tr>
        <td><a href="/accounts/{{ .Id }}">{{ .Username }}</a></td>
        <td>{{ .Created }}</td>
        <td>{{ .LastLogin }}</td>
        <td>{{ .IsAdmin }}</td>
      </tr>
      {{ end }}
    </tbody>
  </table>
</article>
{{ end }}