{% extends "base.html" %}

{% block title %}Login | TrustForge{% endblock %}
{% block meta_description %}Sign in to TrustForge to manage jobs, review requests, and proof cards securely.{% 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">Secure access</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>✓</span><div>Access dashboard, jobs, and proof cards securely</div></div></div>
            <div class="tf-check-field"><div class="tf-check-row"><span>✓</span><div>Preserve the premium TrustForge workflow without exposing customer data publicly</div></div></div>
            <div class="tf-check-field"><div class="tf-check-row"><span>✓</span><div>Next step adds business onboarding and role-based team access</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">Login</div>
          <h2 class="h3 mb-2">Continue into TrustForge</h2>
          <p class="text-secondary-emphasis mb-4">Use your work email and password to open the product workspace.</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="mb-3">
              <label class="form-label">Work email</label>
              {{ form.username }}
              {% if form.username.errors %}<div class="text-danger small mt-1">{{ form.username.errors|join:', ' }}</div>{% endif %}
            </div>
            <div class="mb-3">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <label class="form-label mb-0">Password</label>
                <a class="tf-inline-link small" href="{% url 'password_reset' %}">Forgot password?</a>
              </div>
              {{ form.password }}
              {% if form.password.errors %}<div class="text-danger small mt-1">{{ form.password.errors|join:', ' }}</div>{% endif %}
            </div>
            {% if next %}<input type="hidden" name="next" value="{{ next }}">{% endif %}
            <button type="submit" class="btn tf-btn tf-btn-primary w-100">Log in</button>
          </form>
          <p class="text-secondary-emphasis small mt-4 mb-0">New to TrustForge? <a class="tf-inline-link" href="{% url 'signup' %}">Create your account</a></p>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}