{#
    Company Mobile Card Component
    Used in mobile view for company listing

    Required variables:
    - company: Company entity
#}
<div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow duration-200">
    {# Header: Logo + Name + City #}
    <div class="flex items-start justify-between mb-3">
        <div class="flex items-center space-x-3 flex-1 min-w-0">
            {# Company Logo #}
            <div class="flex-shrink-0">
                <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="block">
                    <img src="{{ company.logo|company_logo_url }}"
                         alt="{{ company.name }}"
                         class="h-16 w-16 rounded-lg object-contain border-2 border-gray-200 shadow-sm hover:shadow-md hover:border-indigo-300 transition-all duration-200 hover:scale-105">
                </a>
            </div>

            {# Company Name + City #}
            <div class="min-w-0 flex-1">
                <p class="text-sm font-semibold text-gray-900 truncate">
                    <a href="{{ path('admin_companies_show', {id: company.id}) }}"
                       class="hover:text-indigo-600 transition-colors duration-150">
                        {{ company.name }}
                    </a>
                </p>
                {% if company.city %}
                    <p class="text-xs text-gray-500 truncate flex items-center mt-0.5">
                        <i class="fas fa-map-marker-alt mr-1 text-gray-400"></i>
                        {{ company.city }}{% if company.country %}, {{ company.country }}{% endif %}
                    </p>
                {% endif %}
            </div>
        </div>
    </div>

    {# Status Badges #}
    <div class="flex flex-wrap gap-2 mb-3">
        {% if company.isActive %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                <i class="fas fa-check-circle mr-1"></i>
                Active
            </span>
        {% else %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                <i class="fas fa-times-circle mr-1"></i>
                Inactive
            </span>
        {% endif %}

        {% if company.deletedAt %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                <i class="fas fa-trash mr-1"></i>
                Supprimée
            </span>
        {% endif %}
    </div>

    {# Contact Info Grid #}
    <dl class="grid grid-cols-2 gap-x-3 gap-y-2 text-xs mb-3">
        {% if company.email %}
            <div class="col-span-2">
                <dt class="text-gray-500">Email</dt>
                <dd class="text-gray-900 font-medium truncate">
                    <i class="fas fa-envelope text-gray-400 mr-1"></i>
                    {{ company.email }}
                </dd>
            </div>
        {% endif %}

        {% if company.phone %}
            <div class="col-span-2">
                <dt class="text-gray-500">Téléphone</dt>
                <dd class="text-gray-900 font-medium truncate">
                    <i class="fas fa-phone text-gray-400 mr-1"></i>
                    {{ company.phone }}
                </dd>
            </div>
        {% endif %}

        {% if company.ninea %}
            <div>
                <dt class="text-gray-500">NINEA</dt>
                <dd class="text-gray-900 font-medium truncate">{{ company.ninea }}</dd>
            </div>
        {% endif %}

        {% if company.createdAt %}
            <div>
                <dt class="text-gray-500">Créée le</dt>
                <dd class="text-gray-900 font-medium">{{ company.createdAt|date('d/m/Y') }}</dd>
            </div>
        {% endif %}
    </dl>

    {# Actions #}
    <div class="pt-3 border-t border-gray-100">
        <a href="{{ path('admin_companies_show', {id: company.id}) }}"
           class="w-full inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-indigo-600 hover:text-white hover:bg-indigo-600 border border-indigo-600 rounded-lg transition-colors">
            <svg class="w-4 h-4 mr-1.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
            </svg>
            Détails
        </a>
    </div>
</div>