{{ define "content" }}
<h2>Create your account</h2>

{{ if .Flash }}
<div class="alert alert-warning" role="alert">{{ .Flash }}</div>
{{ end }}

<form method="POST" action="/account/signup" class="form">
  <input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">

  {{ $form := .Form }}
  {{ $errs := .Errors }}

  <div class="mb-3">
    <label for="username" class="form-label">Username</label>
    <input
      type="text"
      name="username"
      id="username"
      class="form-control {{ if $errs }}{{ if index $errs "username" }}is-invalid{{ end }}{{ end }}"
      required
      value="{{ if $form }}{{ index $form "username" }}{{ end }}"
      autocomplete="username"
    >
    {{ if $errs }}
      {{ with index $errs "username" }}
        <div class="invalid-feedback">{{ . }}</div>
      {{ end }}
    {{ end }}
  </div>

  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input
      type="email"
      name="email"
      id="email"
      class="form-control {{ if $errs }}{{ if index $errs "email" }}is-invalid{{ end }}{{ end }}"
      required
      value="{{ if $form }}{{ index $form "email" }}{{ end }}"
      autocomplete="email"
    >
    {{ if $errs }}
      {{ with index $errs "email" }}
        <div class="invalid-feedback">{{ . }}</div>
      {{ end }}
    {{ end }}
  </div>

  <div class="mb-3">
    <label for="password" class="form-label">Password</label>
    <input
      type="password"
      name="password"
      id="password"
      class="form-control {{ if $errs }}{{ if index $errs "password" }}is-invalid{{ end }}{{ end }}"
      required
      autocomplete="new-password"
    >
    {{ if $errs }}
      {{ with index $errs "password" }}
        <div class="invalid-feedback">{{ . }}</div>
      {{ end }}
    {{ end }}
    <div class="form-text">Minimum 8 characters.</div>
  </div>

  <div class="mb-3">
    <label for="password_confirm" class="form-label">Confirm Password</label>
    <input
      type="password"
      name="password_confirm"
      id="password_confirm"
      class="form-control {{ if $errs }}{{ if index $errs "password_confirm" }}is-invalid{{ end }}{{ end }}"
      required
      autocomplete="new-password"
    >
    {{ if $errs }}
      {{ with index $errs "password_confirm" }}
        <div class="invalid-feedback">{{ . }}</div>
      {{ end }}
    {{ end }}
  </div>

  <div class="form-check mb-3">
    <input
      type="checkbox"
      name="accept_terms"
      id="accept_terms"
      class="form-check-input {{ if $errs }}{{ if index $errs "accept_terms" }}is-invalid{{ end }}{{ end }}"
      {{ if $form }}{{ if eq (index $form "accept_terms") "on" }}checked{{ end }}{{ end }}
    >
    <label for="accept_terms" class="form-check-label">I accept the terms</label>
    {{ if $errs }}
      {{ with index $errs "accept_terms" }}
        <div class="invalid-feedback d-block">{{ . }}</div>
      {{ end }}
    {{ end }}
  </div>

  <button type="submit" class="btn btn-primary">Create account</button>
</form>
{{ end }}