{% extends "base/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Sign Up" %} - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    /* Form styling */
    .signup-form .form-control {
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        border: 1px solid #dee2e6;
        transition: all 0.3s ease;
    }
    
    .signup-form .form-control:focus {
        border-color: #ff6b35;
        box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.15);
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    /* Social login */
    .socialaccount_providers {
        padding: 0;
        margin: 0;
    }
    
    .socialaccount_providers li {
        list-style: none;
        margin-bottom: 0.75rem;
    }
    
    .socialaccount_provider {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        color: #4a5568;
        background-color: white;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        font-weight: 500;
    }
    
    .socialaccount_provider:hover {
        background-color: #f8f9fa;
        border-color: #cbd5e0;
        transform: translateY(-1px);
    }
    
    .socialaccount_provider i {
        margin-right: 0.75rem;
        font-size: 1.25rem;
    }
    
    /* Divider */
    .divider {
        display: flex;
        align-items: center;
        margin: 1.5rem 0;
        color: #a0aec0;
    }
    
    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: #e2e8f0;
    }
    
    .divider-text {
        padding: 0 1rem;
        font-size: 0.875rem;
        font-weight: 500;
    }
    
    /* Form icons */
    .form-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #a0aec0;
        z-index: 10;
    }
    
    .input-group-text {
        background-color: transparent;
        border-right: none;
    }
    
    .form-control.is-invalid {
        border-color: #e53e3e;
        padding-right: calc(1.5em + 0.75rem);
        background-image: none;
    }
    
    .invalid-feedback {
        font-size: 0.875rem;
        margin-top: 0.5rem;
    }
    
    /* Password requirements */
    .password-requirements {
        margin-top: 0.5rem;
        padding-left: 1.25rem;
    }
    
    .password-requirements li {
        font-size: 0.8125rem;
        color: #718096;
        margin-bottom: 0.25rem;
        list-style-type: none;
        position: relative;
    }
    
    .password-requirements li::before {
        content: '•';
        position: absolute;
        left: -1rem;
        color: #a0aec0;
    }
    
    .password-requirements li.valid {
        color: #38a169;
    }
    
    .password-requirements li.valid::before {
        content: '✓';
        color: #38a169;
    }
    
    /* Terms and conditions */
    .terms-text {
        font-size: 0.875rem;
        color: #718096;
        line-height: 1.5;
    }
    
    .terms-text a {
        color: #4a5568;
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s;
    }
    
    .terms-text a:hover {
        color: #2d3748;
        text-decoration: underline;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4 py-md-5">
    <div class="row justify-content-center">
        <div class="col-md-10 col-lg-8">
            <div class="card shadow-sm border-0 overflow-hidden">
                <div class="row g-0">
                    <!-- Left side - Form -->
                    <div class="col-md-7 p-4 p-md-5">
                        <div class="text-center mb-4">
                            <h2 class="h3 fw-bold mb-2">{% trans "Create your account" %}</h2>
                            <p class="text-muted mb-0">{% trans "Join PRACA and access professional equipment" %}</p>
                        </div>
                    
                    {% get_providers as socialaccount_providers %}
                    
                    {% if socialaccount_providers %}
                        <div class="social-login mb-4">
                            <ul class="socialaccount_providers list-unstyled">
                                {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                            </ul>
                        </div>
                        
                        <div class="login-or">
                            <span>{% trans 'or' %}</span>
                        </div>
                        
                        {% include "socialaccount/snippets/login_extra.html" %}
                    {% else %}
                        <p class="text-center mb-4">
                            {% trans 'Already have an account?' %}
                            <a href="{% url 'accounts:login' %}" class="text-primary">{% trans 'Sign in' %}</a>
                        </p>
                    {% endif %}
                    
                    <form class="signup signup-form" id="signup_form" method="post" action="{% url 'accounts:signup' %}" novalidate>
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger" role="alert">
                                {% for error in form.non_field_errors %}
                                    {{ error|escape }}
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.first_name|as_crispy_field }}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    {{ form.last_name|as_crispy_field }}
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            {{ form.email|as_crispy_field }}
                        </div>
                        
                        <div class="form-group">
                            {{ form.username|as_crispy_field }}
                            <small class="form-text text-muted">
                                {% trans "Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only." %}
                            </small>
                        </div>
                        
                        <div class="form-group">
                            {{ form.password1|as_crispy_field }}
                            <div class="form-text">
                                <ul class="list-unstyled mb-0">
                                    <li class="text-muted small">
                                        <i class="fas fa-check-circle text-success"></i>
                                        {% trans "At least 8 characters" %}
                                    </li>
                                    <li class="text-muted small">
                                        <i class="fas fa-check-circle text-success"></i>
                                        {% trans "Can't be too similar to your other personal information" %}
                                    </li>
                                    <li class="text-muted small">
                                        <i class="fas fa-check-circle text-success"></i>
                                        {% trans "Can't be a commonly used password" %}
                                    </li>
                                    <li class="text-muted small">
                                        <i class="fas fa-check-circle text-success"></i>
                                        {% trans "Can't be entirely numeric" %}
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            {{ form.password2|as_crispy_field }}
                        </div>
                        
                        {% if redirect_field_value %}
                            <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                        {% endif %}
                        
                        <div class="d-grid gap-2 mt-4">
                            <button class="btn btn-primary btn-lg" type="submit">
                                <i class="fas fa-user-plus me-2"></i>
                                {% trans "Sign Up" %}
                            </button>
                        </div>
                        
                        <div class="text-center mt-4">
                            <p class="mb-0">
                                {% trans 'Already have an account?' %}
                                <a href="{% url 'accounts:login' %}" class="text-primary fw-medium">{% trans 'Sign In' %}</a>
                            </p>
                        </div>
                    </form>
                </div>
            </div>
            
            <div class="text-center mt-4">
                <p class="text-muted small">
                    {% trans 'By signing up, you agree to our' %}
                    <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">{% trans 'Terms of Service' %}</a>
                    {% trans 'and' %}
                    <a href="#" data-bs-toggle="modal" data-bs-target="#privacyModal">{% trans 'Privacy Policy' %}</a>.
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Password strength indicator
    document.addEventListener('DOMContentLoaded', function() {
        const password1 = document.getElementById('id_password1');
        const password2 = document.getElementById('id_password2');
        const requirements = document.querySelectorAll('.form-text li');
        
        if (password1) {
            password1.addEventListener('input', function() {
                const value = this.value;
                // Check password strength and update UI
                // This is a simplified example - you might want to implement more robust checks
                const hasMinLength = value.length >= 8;
                const hasNumber = /\d/.test(value);
                const hasLetter = /[a-zA-Z]/.test(value);
                const isCommon = ['password', '12345678', 'qwerty', 'letmein'].includes(value.toLowerCase());
                
                // Update requirements list
                requirements[0].classList.toggle('text-success', hasMinLength);
                requirements[0].classList.toggle('text-muted', !hasMinLength);
                
                requirements[1].classList.toggle('text-success', true); // Always true as we can't check similarity client-side
                
                requirements[2].classList.toggle('text-success', !isCommon);
                requirements[2].classList.toggle('text-muted', isCommon);
                
                requirements[3].classList.toggle('text-success', hasNumber && hasLetter);
                requirements[3].classList.toggle('text-muted', !(hasNumber && hasLetter));
            });
        }
        
        // Confirm password match
        if (password1 && password2) {
            password2.addEventListener('input', function() {
                const match = password1.value === this.value;
                const feedback = this.nextElementSibling;
                
                if (feedback && feedback.classList.contains('invalid-feedback')) {
                    if (match) {
                        this.classList.remove('is-invalid');
                        this.classList.add('is-valid');
                    } else {
                        this.classList.remove('is-valid');
                        this.classList.add('is-invalid');
                    }
                }
            });
        }
    });
</script>
{% endblock %}