{% extends "base.html" %}

{% block title %}Sign Up{% endblock %}
{% block meta_description %}Create a Tecvico client account and submit your project brief.{% endblock %}

{% block content %}
<section class="page-hero" aria-labelledby="signup-heading">
  <div class="page-hero-blobs" aria-hidden="true">
    <div class="blob blob--1"></div>
    <div class="blob blob--2"></div>
  </div>
  <div class="container">
    <div class="page-hero-content">
      <div class="section-badge">Client Portal</div>
      <h1 class="page-hero-title" id="signup-heading">Create Account</h1>
      <p class="page-hero-subtitle">Tell us about your project and our team will take it from there.</p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container container--narrow">
    <div class="glass-card portal-card fade-in">
      {% include "accounts/_social_auth.html" %}

      <form method="post" novalidate>
        {% csrf_token %}
        {% if form.non_field_errors %}
        <div class="form-errors">{{ form.non_field_errors }}</div>
        {% endif %}

        <div class="form-grid form-grid--2">
          <div class="form-group">
            <label for="id_first_name">First name <span class="required-star">*</span></label>
            {{ form.first_name }}
            {{ form.first_name.errors }}
          </div>
          <div class="form-group">
            <label for="id_last_name">Last name <span class="required-star">*</span></label>
            {{ form.last_name }}
            {{ form.last_name.errors }}
          </div>
        </div>

        <div class="form-group">
          <label for="id_email">Email <span class="required-star">*</span></label>
          {{ form.email }}
          {{ form.email.errors }}
        </div>

        <div class="form-group">
          <label for="id_username">Username <span class="required-star">*</span></label>
          {{ form.username }}
          {{ form.username.errors }}
        </div>

        <div class="form-grid form-grid--2">
          <div class="form-group">
            <label for="id_company">Company</label>
            {{ form.company }}
            {{ form.company.errors }}
          </div>
          <div class="form-group">
            <label for="id_phone">Phone</label>
            {{ form.phone }}
            {{ form.phone.errors }}
          </div>
        </div>

        <div class="form-grid form-grid--2">
          <div class="form-group">
            <label for="id_password1">Password <span class="required-star">*</span></label>
            {{ form.password1 }}
            {{ form.password1.errors }}
          </div>
          <div class="form-group">
            <label for="id_password2">Confirm password <span class="required-star">*</span></label>
            {{ form.password2 }}
            {{ form.password2.errors }}
          </div>
        </div>

        <button type="submit" class="btn-primary btn-submit">Create account</button>
      </form>

      <p class="portal-footer-text">Already have an account? <a href="{% url 'accounts:login' %}">Log in</a></p>
    </div>
  </div>
</section>
{% endblock %}