{% extends "base.html" %}

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

{% block content %}
<section class="auth-layout row g-4 align-items-stretch justify-content-center">
  <div class="col-lg-5">
    <article class="content-card h-100">
      <p class="card-kicker mb-1">{% if mode == 'signup' %}Create your secure agent space{% else %}Welcome back{% endif %}</p>
      <h1 class="section-title mb-3">{{ page_title }}</h1>
      <p class="muted-copy mb-4">{% if mode == 'signup' %}Create a single-agent account, then add your business name, logo, opening balances, and first transactions.{% else %}Log in to continue recording cash movements, viewing balances, and exporting reports.{% endif %}</p>
      <div class="stack-list compact">
        <div class="stack-item"><strong>Polished dashboard</strong><span>Custom MoMo styling, not default Bootstrap.</span></div>
        <div class="stack-item"><strong>Smart balance engine</strong><span>Each transaction updates e-cash and physical cash automatically.</span></div>
        <div class="stack-item"><strong>Printable reports</strong><span>Export PDF and use browser print for sharing.</span></div>
      </div>
    </article>
  </div>
  <div class="col-lg-5">
    <article class="content-card h-100">
      <form method="post" class="momo-form" novalidate>
        {% csrf_token %}
        <div class="d-grid gap-3">
          {% for field in form %}
          <div>
            <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% if field.help_text %}<div class="form-help">{{ field.help_text }}</div>{% endif %}
            {% for error in field.errors %}<div class="form-error">{{ error }}</div>{% endfor %}
          </div>
          {% endfor %}
          {% for error in form.non_field_errors %}<div class="form-error">{{ error }}</div>{% endfor %}
        </div>
        <button class="btn btn-momo-primary btn-lg w-100 mt-4" type="submit">{% if mode == 'signup' %}Create account{% else %}Log in{% endif %}</button>
      </form>
      <div class="auth-switch text-center mt-4">
        {% if mode == 'signup' %}
        <span>Already have an account?</span> <a class="text-link" href="{% url 'login' %}">Log in</a>
        {% else %}
        <span>Need an account?</span> <a class="text-link" href="{% url 'signup' %}">Sign up</a>
        {% endif %}
      </div>
    </article>
  </div>
</section>
{% endblock %}