{{ define "main" }}
<h1>User Accounts</h1>
<div class="flex-row" style="justify-content:space-between;">
  <div style="min-width:240px;">
    <p>There are <span class=button>{{ len .Accounts }}</span> user accounts.</p>
    <p>Use this page to inspect user accounts or create a new one.</p>
  </div>
  <form action="/accounts" enctype="multipart/form-data" method="post">
    <fieldset>
      <legend>New User Account</legend>
      <div class="grid-2">
        <label for="username" style="min-width:92px;">Username</label>
        <input autofocus
               {{ if or .UsernameDuplicate .UsernameInvalid }}class="error"{{ end }}
               id="username"
               name="username"
               required
               type="text"
               value="{{ .Username }}">
      </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>
    </fieldset>
  </form>
</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 }}