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

{% block title %}Create Account{% endblock %}

{% block content %}
<div class="auth-logo">
    📱
</div>

<h1 class="auth-title">Create Account</h1>
<p class="auth-subtitle">Sign up to get started</p>


<form method="post" class="auth-form">
    {% csrf_token %}
    
    {% if form.non_field_errors %}
        <div class="error-message">
            {% for error in form.non_field_errors %}
                {{ error }}
            {% endfor %}
        </div>
    {% endif %}
    
    <div class="form-group">
        <label for="{{ form.email.id_for_label }}" class="form-label">Email</label>
        <input type="email" 
               class="form-control {% if form.email.errors %}is-invalid{% endif %}" 
               id="{{ form.email.id_for_label }}" 
               name="{{ form.email.name }}" 
               placeholder="you@example.com"
               value="{{ form.email.value|default:'' }}"
               required>
        {% if form.email.errors %}
            <ul class="errorlist">
                {% for error in form.email.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
    
    <div class="form-group">
        <label for="{{ form.password1.id_for_label }}" class="form-label">Password</label>
        <input type="password" 
               class="form-control {% if form.password1.errors %}is-invalid{% endif %}" 
               id="{{ form.password1.id_for_label }}" 
               name="{{ form.password1.name }}" 
               placeholder="••••••••"
               required>
        {% if form.password1.errors %}
            <ul class="errorlist">
                {% for error in form.password1.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
    
    <div class="form-group">
        <label for="{{ form.password2.id_for_label }}" class="form-label">Confirm Password</label>
        <input type="password" 
               class="form-control {% if form.password2.errors %}is-invalid{% endif %}" 
               id="{{ form.password2.id_for_label }}" 
               name="{{ form.password2.name }}" 
               placeholder="••••••••"
               required>
        {% if form.password2.errors %}
            <ul class="errorlist">
                {% for error in form.password2.errors %}
                    <li>{{ error }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
    
    <button type="submit" class="btn-primary">Create Account</button>
</form>

<div class="auth-footer">
    <div></div>
    <div class="auth-links">
        Already have an account? <a href="{% url 'account_login' %}">Sign in</a>
    </div>
</div>

{% endblock %}