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

{% block title %}{% translate "Domain Users" %} - {{ company.name }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="mb-6">
        <h1 class="text-2xl font-bold mb-2">{{ company.name }} - {% translate "Domain Users" %}</h1>
        <p class="text-gray-600">{{ domain.get_full_domain }}</p>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <div class="flex justify-between items-center mb-4">
            <div>
                <h2 class="text-xl font-semibold">{% translate "Email Usage" %}</h2>
                <p class="text-gray-600">
                    {% blocktranslate with used=total_emails total=domain.max_email_accounts %}
                    {{ used }} of {{ total }} email accounts used
                    {% endblocktranslate %}
                </p>
            </div>
            {% if available_slots > 0 %}
            <button 
                class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"
                hx-get="{% url 'companies:create-email' pk=company.pk %}"
                hx-target="#createEmailModal"
                hx-trigger="click">
                {% translate "Create New Email" %}
            </button>
            {% endif %}
        </div>

        <div class="relative pt-1">
            {% with percentage=total_emails|div:domain.max_email_accounts|mul:100 %}
            <div class="overflow-hidden h-2 text-xs flex rounded bg-gray-200">
                <div 
                    class="{% if percentage >= 90 %}bg-red-500{% elif percentage >= 70 %}bg-yellow-500{% else %}bg-green-500{% endif %} rounded 
                    transition-all duration-300"
                    style="width: {{ percentage }}%">
                </div>
            </div>
            {% endwith %}
        </div>
    </div>

    <div id="emailsList" class="bg-white rounded-lg shadow-md">
        {% include "companies/partials/domain_users_list.html" %}
    </div>
</div>

<!-- Modal for creating new email -->
<div id="createEmailModal"></div>
{% endblock %}