{% 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 "Delete Email" %}</h2>
            <button 
                class="text-gray-500 hover:text-gray-700"
                hx-get="{% url 'companies:domain-users' pk=email.company.pk %}"
                hx-target="#emailsList"
                hx-trigger="click">
                &times;
            </button>
        </div>

        <div class="space-y-4">
            <p>{% translate "Are you sure you want to delete this email address?" %}</p>
            <p class="text-sm text-gray-600">{{ email.email_address }}</p>
            
            <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-yellow-700">
                            {% translate "This action cannot be undone. The email address will be permanently removed." %}
                        </p>
                    </div>
                </div>
            </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=email.company.pk %}"
                    hx-target="#emailsList">
                    {% translate "Cancel" %}
                </button>
                <button 
                    hx-delete="{% url 'companies:delete-email' pk=email.pk %}"
                    hx-target="#emailsList"
                    class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
                    {% translate "Delete" %}
                </button>
            </div>
        </div>
    </div>
</div>