{{define "bodyclass"}}page-auth{{end}}
{{define "content"}}
<section class="auth-card">
  <div class="auth-mark">{{icon "deck"}}</div>
  <h1>Welcome to TopDeck</h1>
  <p class="muted">Create the owner account. Only you can sign in; everyone else just sees your lists.</p>
  {{with .Data.Error}}<p class="alert alert--error" role="alert">{{icon "alert"}}{{.}}</p>{{end}}
  <form method="post" action="/setup" class="stack">
    <label class="field">
      <span class="field-label">Setup code</span>
      <input name="code" required autocomplete="one-time-code" placeholder="XXXX-XXXX" spellcheck="false" autocapitalize="characters">
      <span class="field-hint">Printed in the server log when TopDeck starts. Run <code>docker compose logs topdeck</code> to see it.</span>
    </label>
    <label class="field">
      <span class="field-label">Username</span>
      <input name="username" autocomplete="username" required value="{{.Data.Username}}" maxlength="64">
    </label>
    <label class="field">
      <span class="field-label">Password</span>
      <input name="password" type="password" autocomplete="new-password" required minlength="8">
    </label>
    <label class="field">
      <span class="field-label">Confirm password</span>
      <input name="confirm" type="password" autocomplete="new-password" required minlength="8">
    </label>
    <button class="btn btn--primary btn--block" type="submit">Create account</button>
  </form>
</section>
{{end}}