{% extends "base.html" %}

{% block title %}Get Started | TrustForge{% endblock %}
{% block meta_description %}Create your TrustForge account and start turning completed jobs into proof that wins the next customer.{% endblock %}

{% block content %}
<section class="py-5 py-lg-6">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-lg-5">
        <div class="tf-panel tf-panel-centered h-100">
          <div class="tf-eyebrow">Get started</div>
          <h1 class="tf-page-title">{{ auth_page_title }}</h1>
          <p class="tf-page-subtitle">{{ auth_page_description }}</p>
          <div class="tf-auth-points mt-4">
            <div class="tf-check-field"><div class="tf-check-row"><span>01</span><div>Create secure email/password access</div></div></div>
            <div class="tf-check-field"><div class="tf-check-row"><span>02</span><div>Land inside the product instead of a demo-only experience</div></div></div>
            <div class="tf-check-field"><div class="tf-check-row"><span>03</span><div>Next step will connect your account to a business workspace</div></div></div>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="tf-panel tf-panel-centered tf-auth-card">
          <div class="tf-card-tag mb-3">Sign up</div>
          <h2 class="h3 mb-2">Start your TrustForge workspace</h2>
          <p class="text-secondary-emphasis mb-4">Create the account that will own your dashboard access and future business onboarding.</p>
          <form method="post" novalidate>
            {% csrf_token %}
            {% if form.non_field_errors %}
              <div class="alert alert-danger">{{ form.non_field_errors|join:', ' }}</div>
            {% endif %}
            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">First name</label>
                {{ form.first_name }}
                {% if form.first_name.errors %}<div class="text-danger small mt-1">{{ form.first_name.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="col-md-6">
                <label class="form-label">Last name</label>
                {{ form.last_name }}
                {% if form.last_name.errors %}<div class="text-danger small mt-1">{{ form.last_name.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="col-12">
                <label class="form-label">Work email</label>
                {{ form.email }}
                {% if form.email.errors %}<div class="text-danger small mt-1">{{ form.email.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="col-md-6">
                <label class="form-label">Password</label>
                {{ form.password1 }}
                {% if form.password1.errors %}<div class="text-danger small mt-1">{{ form.password1.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="col-md-6">
                <label class="form-label">Confirm password</label>
                {{ form.password2 }}
                {% if form.password2.errors %}<div class="text-danger small mt-1">{{ form.password2.errors|join:', ' }}</div>{% endif %}
              </div>
            </div>
            <button type="submit" class="btn tf-btn tf-btn-primary w-100 mt-4">Create account</button>
          </form>
          <p class="text-secondary-emphasis small mt-4 mb-0">Already have an account? <a class="tf-inline-link" href="{% url 'login' %}">Log in</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}