{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title %}{% trans "Create Staff User" %} - KAAUH ATS{% endblock %}

{% block styles %}
<style>
    /* Custom styles for card and text accent */
    .form-card {
        max-width: 500px;
        width: 100%;
        background-color: #ffffff;
        border-radius: 0.75rem;
        border: 1px solid #e9ecef;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 2.5rem;
    }
    .text-accent {
        color: #007a88 !important; /* Teal accent color */
    }
    .text-accent:hover {
        color: #004d55 !important; /* Darker teal hover */
    }

    /* Removed aggressive !important button overrides from here */
</style>
{% endblock %}

{% block content %}
    <div class="d-flex vh-80 w-100 justify-content-center align-items-center mt-5">

        <div class="form-card">

            <h2 id="form-title" class="h3 fw-bold mb-4 text-center">
                <i class="fas fa-user-plus me-2 text-accent"></i>{% trans "Create User" %}
            </h2>

            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags|default:'info' }} p-3 small" role="alert">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}

        <form method="post" class="space-y-4">
                {% csrf_token %}
                {{ form|crispy }}

                {% if form.non_field_errors %}
                    <div class="alert alert-danger p-3 small mt-3" role="alert">
                        {% for error in form.non_field_errors %}{{ error }}{% endfor %}
                    </div>
                {% endif %}

                {# 🚀 GUARANTEED FIX: Using inline CSS variables to override Bootstrap Primary color #}
                <button type="submit"
                        class="btn btn-primary w-100 mt-3"
                        style="--bs-btn-bg: #007a88;
                               --bs-btn-border-color: #007a88;
                               --bs-btn-hover-bg: #004d55;
                               --bs-btn-hover-border-color: #004d55;
                               --bs-btn-active-bg: #004d55;
                               --bs-btn-active-border-color: #004d55;
                               --bs-btn-focus-shadow-rgb: 40, 167, 69;
                               --bs-btn-color: #ffffff;">
                    <i class="fas fa-save me-2"></i>{% trans "Create User" %}
                </button>
            </form>

            <div class="pt-3 mt-1 text-center border-top border-light-subtle mb-4">
                <p class="text-muted small mb-0">
                    <i class="fas fa-arrow-left me-1"></i>
                    <a href="{% url 'admin_settings' %}" class="text-accent text-decoration-none text-secondary">{% trans "Back to Settings" %}</a>
                </p>
            </div>
        </div>
    </div>
{% endblock %}