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

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

{% block content %}
<div class="flex items-center justify-center min-h-screen py-8 px-4">
    <div class="w-full max-w-lg bg-white rounded-2xl shadow-xl border border-gray-100 p-8">
        
        <!-- Header -->
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl mb-4" 
                 style="background-color: rgba(157, 34, 53, 0.1);">
                <i data-lucide="user-plus" class="w-8 h-8" style="color: #9d2235;"></i>
            </div>
            <h2 class="text-2xl font-bold mb-2">
                {% trans "Create User" %}
            </h2>
            <p class="text-sm text-gray-500">
                {% trans "Add a new staff member to the system" %}
            </p>
        </div>

        <!-- Messages -->
        {% if messages %}
            {% for message in messages %}
                <div class="mb-4 px-4 py-3 rounded-lg text-sm
                      {% if message.tags == 'error' %}bg-red-50 text-red-800{% elif message.tags == 'success' %}bg-green-50 text-green-800{% else %}bg-blue-50 text-blue-800{% endif %}"
                      role="alert">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}

        <!-- Form -->
        <form method="post" class="space-y-6">
            {% csrf_token %}

            <!-- First Name -->
            <div>
                <label for="id_first_name" class="block text-sm font-semibold text-gray-700 mb-2">
                    {% trans "First Name" %}
                </label>
                <div class="relative">
                    <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="text" 
                           name="first_name" 
                           id="id_first_name" 
                           value="{{ form.first_name.value|default:'' }}"
                           class="w-full pl-10 pr-4 py-3.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
                           placeholder="{% trans 'Enter first name' %}"
                           required>
                </div>
                {% if form.first_name.errors %}
                    <div class="text-red-600 text-sm mt-1">{{ form.first_name.errors.0 }}</div>
                {% endif %}
            </div>

            <!-- Last Name -->
            <div>
                <label for="id_last_name" class="block text-sm font-semibold text-gray-700 mb-2">
                    {% trans "Last Name" %}
                </label>
                <div class="relative">
                    <i data-lucide="user" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="text" 
                           name="last_name" 
                           id="id_last_name" 
                           value="{{ form.last_name.value|default:'' }}"
                           class="w-full pl-10 pr-4 py-3.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
                           placeholder="{% trans 'Enter last name' %}"
                           required>
                </div>
                {% if form.last_name.errors %}
                    <div class="text-red-600 text-sm mt-1">{{ form.last_name.errors.0 }}</div>
                {% endif %}
            </div>

            <!-- Email -->
            <div>
                <label for="id_email" class="block text-sm font-semibold text-gray-700 mb-2">
                    {% trans "Email Address" %}
                </label>
                <div class="relative">
                    <i data-lucide="mail" class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400"></i>
                    <input type="email" 
                           name="email" 
                           id="id_email" 
                           value="{{ form.email.value|default:'' }}"
                           class="w-full pl-10 pr-4 py-3.5 border border-gray-200 rounded-xl text-sm focus:ring-2 focus:ring-temple-red/20 focus:border-temple-red outline-none transition"
                           placeholder="{% trans 'Enter email address' %}"
                           required>
                </div>
                {% if form.email.errors %}
                    <div class="text-red-600 text-sm mt-1">{{ form.email.errors.0 }}</div>
                {% endif %}
            </div>

            {% if form.non_field_errors %}
                <div class="px-4 py-3 bg-red-50 text-red-800 rounded-lg text-sm" role="alert">
                    {% for error in form.non_field_errors %}{{ error }}{% endfor %}
                </div>
            {% endif %}

            <!-- Submit Button -->
            <button type="submit"
                    class="w-full bg-temple-red hover:bg-[#7a1a29] text-white font-semibold py-4 rounded-xl text-sm transition shadow-md hover:shadow-lg flex items-center justify-center gap-2">
                <i data-lucide="save" class="w-5 h-5"></i>
                <span>{% trans "Create User" %}</span>
            </button>
        </form>

        <!-- Back Link -->
        <div class="mt-8 text-center">
            <a href="{% url 'admin_settings' %}" 
               class="text-sm font-medium text-temple-red hover:text-temple-red/80 transition flex items-center justify-center gap-2">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Back to Settings" %}
            </a>
        </div>
    </div>
</div>

<script>
    // Initialize Lucide icons
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
    });
</script>
{% endblock %}