{% load i18n %}

<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <div class="bg-white rounded-lg p-6 max-w-md w-full">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-semibold">{% translate "Create Professional Email" %}</h2>
            <button 
                class="text-gray-500 hover:text-gray-700"
                hx-get="{% url 'companies:domain-users' pk=company.pk %}"
                hx-target="#emailsList"
                hx-trigger="click">
                &times;
            </button>
        </div>

        <form 
            hx-post="{% url 'companies:create-email' pk=company.pk %}"
            hx-target="#createEmailModal"
            class="space-y-4">
            {% csrf_token %}
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    {% translate "User" %}
                </label>
                <select name="user" class="w-full rounded-md border-gray-300" required>
                    <option value="">{% translate "Select a user" %}</option>
                    {% for user in users %}
                    <option value="{{ user.pk }}" {% if user.pk == selected_user %}selected{% endif %}>
                        {{ user.get_full_name }} ({{ user.email }})
                    </option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">
                    {% translate "Email Prefix" %}
                </label>
                <div class="flex">
                    <input 
                        type="text" 
                        name="email_prefix"
                        class="flex-1 rounded-l-md border-gray-300"
                        pattern="[a-zA-Z0-9._%+-]+"
                        required>
                    <span class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500">
                        @{{ domain.get_full_domain }}
                    </span>
                </div>
                <p class="mt-1 text-sm text-gray-500">
                    {% translate "Only letters, numbers, and the characters ._%+- are allowed" %}
                </p>
            </div>

            <div class="flex justify-end space-x-3">
                <button 
                    type="button"
                    class="px-4 py-2 border rounded-md hover:bg-gray-50"
                    hx-get="{% url 'companies:domain-users' pk=company.pk %}"
                    hx-target="#emailsList">
                    {% translate "Cancel" %}
                </button>
                <button 
                    type="submit"
                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                    {% translate "Create" %}
                </button>
            </div>
        </form>
    </div>
</div>