{{template "base" .}}

{{define "title"}}Create Account — Arcline IT Client Portal{{end}}

{{define "content"}}
<div class="auth-wrap">
  <div class="auth-card">
    <div class="auth-card__header">
      <span class="auth-card__prompt">$ arcline-billing --register</span>
    </div>
    <div class="auth-card__body">
      <h1 class="auth-card__title">Create your account</h1>

      {{if .Error}}
      <div class="alert alert--error">
        {{if eq .Error "missing_fields"}}Please fill in all required fields.
        {{else if eq .Error "password_mismatch"}}Passwords do not match.
        {{else if eq .Error "password_too_short"}}Password must be at least 8 characters.
        {{else if eq .Error "email_taken"}}An account with that email already exists.
        {{else if eq .Error "server_error"}}A server error occurred. Please try again.
        {{else}}An error occurred. Please try again.{{end}}
      </div>
      {{end}}

      <form method="POST" action="/register" class="form">
        <div class="form__row">
          <div class="form__group">
            <label class="form__label" for="first_name">First name</label>
            <input class="form__input" type="text" id="first_name" name="first_name"
                   autocomplete="given-name" required placeholder="Blake">
          </div>
          <div class="form__group">
            <label class="form__label" for="last_name">Last name</label>
            <input class="form__input" type="text" id="last_name" name="last_name"
                   autocomplete="family-name" required placeholder="Smith">
          </div>
        </div>
        <div class="form__group">
          <label class="form__label" for="email">Email</label>
          <input class="form__input" type="email" id="email" name="email"
                 autocomplete="email" required placeholder="you@example.com">
        </div>
        <div class="form__group">
          <label class="form__label" for="password">Password <span class="form__hint">(min. 8 characters)</span></label>
          <input class="form__input" type="password" id="password" name="password"
                 autocomplete="new-password" required placeholder="••••••••" minlength="8">
        </div>
        <div class="form__group">
          <label class="form__label" for="confirm_password">Confirm password</label>
          <input class="form__input" type="password" id="confirm_password" name="confirm_password"
                 autocomplete="new-password" required placeholder="••••••••" minlength="8">
        </div>
        <button class="btn btn--primary btn--full" type="submit">Create account</button>
      </form>

      <div class="auth-card__links">
        <span class="auth-card__text">Already have an account?</span>
        <a href="/login" class="auth-card__link">Sign in</a>
      </div>
    </div>
  </div>
</div>
{{end}}