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

{% block title %}Login - webFirma{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row min-vh-100">
        <div class="col-md-6 d-flex flex-column justify-content-center align-items-center text-white" style="background: linear-gradient(45deg, #007bff, #0056b3);">
            <div class="text-center p-5">
                <h1 class="display-4 font-weight-bold">webFirma</h1>
                <p class="lead mt-3">Streamline your client and project management.</p>
            </div>
        </div>
        <div class="col-md-6 d-flex justify-content-center align-items-center">
            <div class="card shadow-lg p-5" style="width: 100%; max-width: 450px;">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Login</h2>
                    <form method="post">
                        {% csrf_token %}
                        <div class="form-floating mb-3">
                            {{ form.username }}
                            <label for="{{ form.username.id_for_label }}">Username</label>
                        </div>
                        <div class="form-floating mb-3">
                            {{ form.password }}
                            <label for="{{ form.password.id_for_label }}">Password</label>
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Login</button>
                        </div>
                    </form>
                    <div class="text-center mt-3">
                        <p>Don't have an account? <a href="{% url 'register' %}">Register here</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .form-floating .form-control {
        height: calc(3.5rem + 2px);
        padding: 1rem;
    }
    .form-floating > label {
        padding: 1rem;
    }
</style>
{% endblock %}
