{% extends 'backlogger/base_auth.html' %}

{% block title %}Sign up — Backlogger{% endblock %}

{% block styles %}
<style>
  .help { font-size: 0.75rem; color: #475569; margin-top: 0.3rem; }
</style>
{% endblock %}

{% block content %}
<div class="auth-card">
  <a class="auth-brand" href="/">killmybacklog.com</a>
  <p class="auth-subtitle">Create an account</p>

  <form method="post">
    {% csrf_token %}

    <div class="field">
      <label for="{{ form.username.id_for_label }}">Username</label>
      {{ form.username }}
      {{ form.username.errors }}
    </div>
    <div class="field">
      <label for="{{ form.email.id_for_label }}">Email</label>
      {{ form.email }}
      {{ form.email.errors }}
    </div>
    <div class="field">
      <label for="{{ form.password1.id_for_label }}">Password</label>
      {{ form.password1 }}
      {{ form.password1.errors }}
    </div>
    <div class="field">
      <label for="{{ form.password2.id_for_label }}">Confirm password</label>
      {{ form.password2 }}
      {{ form.password2.errors }}
    </div>

    <button type="submit" class="btn btn-primary" style="width:100%;margin-top:0.5rem">Request account</button>
  </form>
  <p style="text-align:center;margin-top:1.25rem;font-size:0.83rem;color:#64748b;">
    Already have an account? <a href="/accounts/login/" style="color:#38bdf8;">Log in</a>
  </p>
</div>
{% endblock %}