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

{% block title %}Sign In - Trademont{% endblock %}
{% block description %}Sign in to your Trademont account to access your copy trading dashboard and manage your portfolio.{% 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">Welcome back</h2>
      <p class="mt-2 muted">Sign in to access your dashboard and manage your copy trading settings.</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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </div>
          <span class="text-sm muted">Secure accounts with 2FA</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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
            </svg>
          </div>
          <span class="text-sm muted">Follow verified lead traders</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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
            </svg>
          </div>
          <span class="text-sm muted">Transparent performance metrics</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">Welcome back</div>
      <div class="form-sub">Sign in to your account to continue</div>
      
      <form method="post" class="mt-6">
        {% 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="form-field">
          <label for="id_email">Email address</label>
          <input id="id_email" name="email" type="email" required autocomplete="email" class="form-input" placeholder="Enter your email address" />
        </div>

        <div class="form-field">
          <label for="id_password">Password</label>
          <div class="password-wrap">
            <input id="id_password" name="password" type="password" required autocomplete="current-password" class="form-input" placeholder="Enter your password" />
            <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" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="flex items-center justify-between mt-6">
          <label class="flex items-center gap-2 text-sm">
            <input type="checkbox" class="w-4 h-4 text-amber-600 bg-slate-800 border-slate-600 rounded focus:ring-amber-500 focus:ring-2">
            <span class="muted">Remember me</span>
          </label>
          <a href="{% url 'accounts:password_reset' %}" class="text-sm text-amber-400 hover:text-amber-300 transition-colors">Forgot password?</a>
        </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="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
          </svg>
          Sign in
        </button>

        <div class="auth-footer">
          Don't have an account? <a href="/accounts/register/" class="text-amber-400 hover:text-amber-300 font-semibold transition-colors">Create one</a>
        </div>
      </form>
    </section>
  </div>
</div>
{% endblock %}