{% 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 "Email Activation" %}</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 activate this email address?" %}</p>
            <p class="text-sm text-gray-600">{{ email.email_address }}</p>

            <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-post="{% url 'companies:activate-email' pk=email.pk %}"
                    hx-target="#emailsList"
                    class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
                    {% translate "Activate" %}
                </button>
            </div>
        </div>
    </div>
</div>