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

{% block title %}{% trans "Sign In" %} - PRACA Enterprises{% endblock %}

{% block extra_css %}
<style>
    .auth-container {
        min-height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        padding: 2rem 0;
    }
    
    .auth-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    
    .auth-header {
        background: #f8f9fa;
        padding: 1.5rem;
        border-bottom: 1px solid #e9ecef;
        text-align: center;
    }
    
    .auth-logo {
        max-width: 120px;
        margin-bottom: 1rem;
    }
    
    .auth-body {
        padding: 2rem;
    }
    
    .auth-title {
        font-weight: 600;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .social-buttons {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        margin: 1.5rem 0;
    }
    
    .btn-social {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.6rem 1rem;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    
    .btn-google {
        background-color: #fff;
        color: #757575;
        border: 1px solid #ddd;
    }
    
    .btn-google:hover {
        background-color: #f8f9fa;
        border-color: #ccc;
    }
    
    .btn-facebook {
        background-color: #3b5998;
        color: #fff;
        border: 1px solid #3b5998;
    }
    
    .btn-facebook:hover {
        background-color: #344e86;
        border-color: #344e86;
        color: #fff;
    }
    
    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0;
        color: #6c757d;
    }
    
    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #e9ecef;
    }
    
    .divider:not(:empty)::before {
        margin-right: 1rem;
    }
    
    .divider:not(:empty)::after {
        margin-left: 1rem;
    }
    
    .form-control {
        padding: 0.75rem 1rem;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }
    
    .form-control:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
    }
    
    .btn-primary {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        font-weight: 600;
    }
    
    .auth-footer {
        margin-top: 1.5rem;
        text-align: center;
        color: #6c757d;
    }
    
    .auth-footer a {
        color: #0d6efd;
        text-decoration: none;
    }
    
    .auth-footer a:hover {
        text-decoration: underline;
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-5">
                <div class="auth-card">
                    <div class="auth-header">
                        <h1 class="h4 mb-0">{% trans "Welcome Back" %}</h1>
                        <p class="mb-0 text-muted">{% trans "Sign in to continue to PRACA" %}</p>
                    </div>
                    
                    <div class="auth-body">
                        {% get_providers as socialaccount_providers %}
                        
                        {% if socialaccount_providers %}
                            <div class="social-buttons">
                                {% for provider in socialaccount_providers %}
                                    {% if provider.id == "google" %}
                                        <a href="{% provider_login_url provider.id process='login' %}" class="btn btn-google">
                                            <i class="fab fa-google me-2"></i> {% trans 'Continue with Google' %}
                                        </a>
                                    {% elif provider.id == "facebook" %}
                                        <a href="{% provider_login_url provider.id process='login' %}" class="btn btn-facebook">
                                            <i class="fab fa-facebook-f me-2"></i> {% trans 'Continue with Facebook' %}
                                        </a>
                                    {% else %}
                                        <a href="{% provider_login_url provider.id process='login' %}" class="btn btn-outline-secondary">
                                            {% trans 'Sign in with' %} {{ provider.name }}
                                        </a>
                                    {% endif %}
                                {% endfor %}
                            </div>
                            
                            <div class="divider">{% trans 'or' %}</div>
                        {% endif %}
                        
                        <form class="login" method="POST" action="{% url 'accounts:login' %}" novalidate>
                            {% csrf_token %}
                            
                            {% if redirect_field_value %}
                                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
                            {% endif %}
                            
                            {% if form.non_field_errors %}
                                <div class="alert alert-danger">
                                    {% for error in form.non_field_errors %}
                                        {{ error }}
                                    {% endfor %}
                                </div>
                            {% endif %}
                            
                            {% if messages %}
                                {% for message in messages %}
                                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show">
                                        {{ message }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                    </div>
                                {% endfor %}
                            {% endif %}
                            
                            <div class="mb-3">
                                <label for="id_login" class="form-label">{% trans 'Email or Username' %}</label>
                                <input type="text" 
                                       name="login" 
                                       id="id_login" 
                                       class="form-control {% if form.login.errors %}is-invalid{% endif %}" 
                                       placeholder="{% trans 'Enter your email or username' %}" 
                                       autocomplete="username" 
                                       required>
                                {% if form.login.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.login.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3">
                                <div class="d-flex justify-content-between">
                                    <label for="id_password" class="form-label">{% trans 'Password' %}</label>
                                    <a href="{% url 'accounts:password_reset' %}" class="small text-decoration-none">
                                        {% trans 'Forgot Password?' %}
                                    </a>
                                </div>
                                <input type="password" 
                                       name="password" 
                                       id="id_password" 
                                       class="form-control {% if form.password.errors %}is-invalid{% endif %}" 
                                       placeholder="{% trans 'Enter your password' %}"
                                       autocomplete="current-password" 
                                       required>
                                {% if form.password.errors %}
                                    <div class="invalid-feedback">
                                        {{ form.password.errors|join:", " }}
                                    </div>
                                {% endif %}
                            </div>
                            
                            <div class="mb-3 form-check">
                                <input type="checkbox" name="remember" id="id_remember" class="form-check-input">
                                <label class="form-check-label" for="id_remember">
                                    {% trans 'Remember me' %}
                                </label>
                            </div>
                            
                            <button type="submit" class="btn btn-primary w-100 mb-3">
                                {% trans 'Sign In' %}
                            </button>
                            
                            <div class="auth-footer">
                                <p class="mb-0">
                                    {% trans "Don't have an account?" %}
                                    <a href="{% url 'accounts:signup' %}">{% trans 'Sign up' %}</a>
                                </p>
                            </div>
                        </form>
                        
                        {% include "socialaccount/snippets/login_extra.html" %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add any client-side validation or enhancements here
        const form = document.querySelector('.login');
        if (form) {
            form.addEventListener('submit', function(e) {
                // Client-side validation can be added here
            });
        }
    });
</script>
{% endblock %}