{% extends "base.html" %}

{% block title %}{{ page_title }}{% endblock %}
{% block meta_description %}{{ meta_description }}{% endblock %}

{% block content %}
<div class="subpage-shell auth-shell">
  <div class="container py-5">
    {% if messages %}
    <div class="message-stack mb-4">
      {% for message in messages %}
      <div class="alert alert-{{ message.tags|default:'info' }} custom-alert mb-0" role="alert">{{ message }}</div>
      {% endfor %}
    </div>
    {% endif %}

    <div class="row justify-content-center">
      <div class="col-lg-7 col-xl-6">
        <div class="glass-panel auth-card">
          <span class="eyebrow">Create account</span>
          <h1>Start your private tracker</h1>
          <p>This is the simple user system behind the app: once you sign up, each new entry is stored under your account instead of the public demo sample.</p>

          <form method="post" novalidate>
            {% csrf_token %}
            <input type="hidden" name="next" value="{{ next_url }}">
            <div class="row g-3">
              {% for field in form %}
              <div class="col-12 {% if field.name == 'username' or field.name == 'email' %}col-md-6{% endif %}">
                <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                {{ field }}
                {% if field.help_text %}
                <div class="form-hint">{{ field.help_text }}</div>
                {% endif %}
                {% if field.errors %}
                <div class="invalid-feedback d-block">
                  {% for error in field.errors %}{{ error }}{% endfor %}
                </div>
                {% endif %}
              </div>
              {% endfor %}
            </div>
            {% if form.non_field_errors %}
            <div class="invalid-feedback d-block mt-3">
              {% for error in form.non_field_errors %}{{ error }}{% endfor %}
            </div>
            {% endif %}
            <div class="d-flex flex-wrap gap-3 align-items-center mt-4">
              <button type="submit" class="btn btn-accent btn-lg">Create account</button>
              <a class="btn btn-ghost btn-lg" href="{% url 'login' %}{% if next_url %}?next={{ next_url|urlencode }}{% endif %}">I already have an account</a>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}