{% load i18n %}

<div class="divide-y divide-gray-200">
    {% for user, emails in users_emails.items %}
    <div class="p-4">
        <div class="flex items-center justify-between mb-2">
            <div>
                <h3 class="text-lg font-semibold">{{ user.get_full_name }}</h3>
                <p class="text-gray-600 text-sm">{{ user.email }}</p>
            </div>
            {% if user == request.user or perms.accounts.manage_email %}
            <button 
                class="text-blue-500 hover:text-blue-600"
                hx-get="{% url 'companies:create-email' pk=company.pk %}?user={{ user.pk }}"
                hx-target="#createEmailModal"
                hx-trigger="click">
                {% translate "Add Email" %}
            </button>
            {% endif %}
        </div>
        
        <div class="space-y-2">
            {% for email in emails %}
            <div class="flex items-center justify-between bg-gray-50 p-2 rounded">
                <div>
                    <span class="font-mono">{{ email.get_email_address }}</span>
                    {% if email.is_primary %}
                    <span class="ml-2 px-2 py-1 bg-green-100 text-green-800 text-xs rounded">
                        {% translate "Primary" %}
                    </span>
                    {% endif %}
                </div>
                
                <div class="flex items-center space-x-2">
                    {% if not email.is_primary %}
                    <button 
                        class="text-sm text-blue-500 hover:text-blue-600"
                        hx-post="{% url 'companies:set-primary-email' email_id=email.id %}"
                        hx-target="#emailsList"
                        hx-confirm="{% translate 'Set this email as primary?' %}">
                        {% translate "Set Primary" %}
                    </button>
                    
                    <button 
                        class="text-sm text-red-500 hover:text-red-600"
                        hx-post="{% url 'companies:deactivate-email' email_id=email.id %}"
                        hx-target="#emailsList"
                        hx-confirm="{% translate 'Deactivate this email?' %}">
                        {% translate "Deactivate" %}
                    </button>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% empty %}
    <div class="p-4 text-center text-gray-500">
        {% translate "No email accounts found" %}
    </div>
    {% endfor %}
</div>