{% extends 'auth_base.html' %}
{% load static %}

{% block title %}Create Account - Trademont{% endblock %}
{% block description %}Join Trademont today and start following top traders. Create your free account to access our copy trading platform.{% endblock %}

{% block content %}
<div class="auth-wrap">
  <div class="auth-card">
    <aside class="auth-illustration">
      <div class="auth-brand">
        <img src="{% static 'images/logo-light.svg' %}" alt="Trademont" />
        <div>
          <h1 class="text-2xl font-bold bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">Trademont</h1>
          <p class="muted">Smart copy trading — follow top traders with confidence.</p>
        </div>
      </div>

      <h2 class="fade-in-up">Join thousands of investors</h2>
      <p class="mt-2 muted">Start your copy trading journey with our secure and transparent platform.</p>
      
      <div class="mt-8 space-y-4">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-amber-500/20 rounded-full flex items-center justify-center">
            <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
            </svg>
          </div>
          <span class="text-sm muted">Bank-level security</span>
        </div>
        
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-orange-500/20 rounded-full flex items-center justify-center">
            <svg class="w-4 h-4 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <span class="text-sm muted">Proven track record</span>
        </div>
        
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 bg-blue-500/20 rounded-full flex items-center justify-center">
            <svg class="w-4 h-4 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <span class="text-sm muted">Easy to get started</span>
        </div>
      </div>

      <img src="{% static 'images/hero-illustration.svg' %}" alt="Trading illustration" class="mt-8" />
    </aside>

    <section class="auth-panel">
      <div class="auth-brand">
        <img src="{% static 'images/logo-light.svg' %}" alt="Trademont" />
        <div>
          <h1 class="text-xl font-bold bg-gradient-to-r from-amber-400 to-orange-400 bg-clip-text text-transparent">Trademont</h1>
        </div>
      </div>
      
      <div class="form-title">Create your account</div>
      <div class="form-sub">Join thousands of investors already using Trademont</div>
      
      <form method="post" class="mt-6" novalidate>
        {% csrf_token %}

        {% if form.non_field_errors %}
          <div class="field-errors mb-4">
            {% for err in form.non_field_errors %}
              <div>{{ err }}</div>
            {% endfor %}
          </div>
        {% endif %}

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="form-field {% if form.first_name.errors %}has-error{% endif %}">
            <label for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
            {{ form.first_name }}
            {% if form.first_name.errors %}
              <div class="field-errors">{% for e in form.first_name.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
            {% endif %}
          </div>

          <div class="form-field {% if form.last_name.errors %}has-error{% endif %}">
            <label for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
            {{ form.last_name }}
            {% if form.last_name.errors %}
              <div class="field-errors">{% for e in form.last_name.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
            {% endif %}
          </div>
        </div>

        <div class="form-field {% if form.email.errors %}has-error{% endif %}">
          <label for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
          {{ form.email }}
          {% if form.email.errors %}
            <div class="field-errors">{% for e in form.email.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
          {% endif %}
        </div>

        <div class="form-field {% if form.phone_number.errors %}has-error{% endif %}">
          <label for="{{ form.phone_number.id_for_label }}">{{ form.phone_number.label }}</label>
          {{ form.phone_number }}
          {% if form.phone_number.errors %}
            <div class="field-errors">{% for e in form.phone_number.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
          {% endif %}
        </div>

        <div class="form-field {% if form.country.errors %}has-error{% endif %}">
          <label for="{{ form.country.id_for_label }}">{{ form.country.label }}</label>
          {{ form.country }}
          {% if form.country.errors %}
            <div class="field-errors">{% for e in form.country.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
          {% endif %}
        </div>

        <div class="form-field {% if form.password1.errors %}has-error{% endif %}">
          <label for="{{ form.password1.id_for_label }}">{{ form.password1.label }}</label>
          <div class="password-wrap">
            {{ form.password1 }}
            <button type="button" class="pw-toggle" aria-label="Show password" aria-pressed="false">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
          </div>
          {% if form.password1.help_text %}<div class="help-text">{{ form.password1.help_text }}</div>{% endif %}
          {% if form.password1.errors %}
            <div class="field-errors">{% for e in form.password1.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
          {% endif %}
        </div>

        <div class="form-field {% if form.password2.errors %}has-error{% endif %}">
          <label for="{{ form.password2.id_for_label }}">{{ form.password2.label }}</label>
          <div class="password-wrap">
            {{ form.password2 }}
            <button type="button" class="pw-toggle" aria-label="Show password" aria-pressed="false">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
          </div>
          {% if form.password2.errors %}
            <div class="field-errors">{% for e in form.password2.errors %}{{ e }}{% if not forloop.last %}<br/>{% endif %}{% endfor %}</div>
          {% endif %}
        </div>

        <div class="flex items-start gap-3 mt-6">
          <input type="checkbox" id="terms" required class="w-4 h-4 text-amber-600 bg-slate-800 border-slate-600 rounded focus:ring-amber-500 focus:ring-2 mt-1">
          <label for="terms" class="text-sm text-slate-300">
            I agree to the <a href="/terms/" class="text-amber-400 hover:text-amber-300">Terms of Service</a> and <a href="/privacy/" class="text-amber-400 hover:text-amber-300">Privacy Policy</a>
          </label>
        </div>

        <button type="submit" class="primary-btn mt-6">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path>
          </svg>
          Create account
        </button>

        <div class="auth-footer">
          Already have an account? <a href="/accounts/login/" class="text-amber-400 hover:text-amber-300 font-semibold transition-colors">Sign in</a>
        </div>
      </form>
    </section>
  </div>
</div>
{% endblock %}