{% extends 'base.html' %}
{% load i18n %}

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

{% block content %}
<div class="row justify-content-center align-items-center py-5" style="min-height: 80vh;">
    <div class="col-md-6 col-lg-5">
        <div class="glass-card shadow-lg border-0 p-4 p-md-5" style="border-top: 5px solid #E63946 !important;">
            <div class="text-center mb-5">
                <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; background: #fff5f5; border-radius: 12px;">
                    <i class="bi bi-person-plus text-danger fs-2"></i>
                </div>
                <h2 class="fw-bold text-dark brand-font mb-2">{% trans "Create Account" %}</h2>
                <p class="text-secondary small">{% trans "Join the next-gen management system" %}</p>
            </div>
            
            <form method="post" class="needs-validation">
                {% csrf_token %}
                {% for field in form %}
                <div class="mb-3">
                    <label class="form-label small fw-bold text-secondary text-uppercase mb-2" for="{{ field.id_for_label }}">
                        {{ field.label }}
                    </label>
                    {{ field }}
                    {% if field.help_text %}
                    <div class="form-text small mb-1">{{ field.help_text|safe }}</div>
                    {% endif %}
                    {% if field.errors %}
                    <div class="text-danger small mt-1">
                        {% for error in field.errors %}{{ error }}{% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <button type="submit" class="btn btn-danger w-100 py-3 fw-bold mt-4 shadow-sm" style="background-color: #E63946; border: none; border-radius: 8px;">
                    {% trans "CREATE ACCOUNT" %} <i class="bi bi-check-circle ms-1"></i>
                </button>
            </form>
            
            <div class="text-center mt-5">
                <p class="text-secondary small mb-4">Already have an account? <a href="{% url 'login' %}" class="text-danger fw-bold text-decoration-none">Log in here</a></p>
                <hr class="opacity-10 mb-4">
                <a href="{% url 'home' %}" class="btn btn-link btn-sm text-secondary text-decoration-none">
                    <i class="bi bi-house-door me-1"></i> Back to Home
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    input:not([type="checkbox"]) {
        display: block;
        width: 100%;
        padding: 0.85rem 1.25rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #2b2d42;
        background-color: #ffffff;
        background-clip: padding-box;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        transition: all 0.2s ease-in-out;
    }
    input:not([type="checkbox"]):focus {
        border-color: #E63946;
        outline: 0;
        box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.08);
        background-color: #fff;
    }
    .glass-card {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .shadow-danger {
        box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2);
    }
    .helptext ul {
        list-style: none;
        padding-left: 0;
        margin-top: 5px;
        color: #6c757d;
        font-size: 0.8rem;
    }
</style>
{% endblock %}