{% load i18n %}

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center justify-between">
        <h2 class="text-lg font-semibold text-gray-800">{% translate "Your Companies" %}</h2>
        <span class="text-2xl font-bold text-indigo-600">{{ total_user_companies }}</span>
    </div>
    <div class="mt-4 space-y-2">
        {% for company in user_companies|slice:":3" %}
            <a href="{% url 'companies:detail' company.pk %}"
               class="block p-3 rounded-lg hover:bg-indigo-50 transition-colors"
               hx-boost="true">
                <div class="flex items-center justify-between">
                    <span class="font-medium text-gray-700">{{ company.name }}</span>
                    {% include "companies/partials/company_status.html" with company=company %}
                </div>
            </a>
        {% empty %}
            <p class="text-gray-500">No companies yet. <a href="{% url 'companies:create' %}" class="text-indigo-600 hover:text-indigo-800" hx-boost="true">Create one</a></p>
        {% endfor %}
        {% if total_user_companies > 3 %}
            <a href="{% url 'companies:list' %}" class="text-indigo-600 hover:text-indigo-800 text-sm" hx-boost="true">View all companies →</a>
        {% endif %}
    </div>
</div>