{#
    Company Grid Card Component
    Used in desktop grid view for company listing

    Required variables:
    - company: Company entity
#}
<div class="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-lg transition-all duration-200 overflow-hidden group">
    {# Card Header with Logo #}
    <div class="relative h-40 bg-gradient-to-br from-blue-50 to-indigo-50 flex items-center justify-center">
        <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="relative z-10">
            <img src="{{ company.logo|company_logo_url }}"
                 alt="{{ company.name }}"
                 class="h-28 w-28 rounded-xl object-contain shadow-lg border-3 border-white group-hover:shadow-xl group-hover:scale-110 transition-all duration-300">
        </a>

        {# Status Badge - Top Right #}
        <div class="absolute top-3 right-3">
            {% if company.isActive %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 shadow-sm">
                    <i class="fas fa-check-circle mr-1"></i>
                    Active
                </span>
            {% else %}
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 shadow-sm">
                    <i class="fas fa-times-circle mr-1"></i>
                    Inactive
                </span>
            {% endif %}
        </div>

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

    {# Card Body #}
    <div class="p-5">
        {# Company Name #}
        <h3 class="text-lg font-semibold text-gray-900 mb-1 truncate">
            <a href="{{ path('admin_companies_show', {id: company.id}) }}"
               class="hover:text-indigo-600 transition-colors duration-150">
                {{ company.name }}
            </a>
        </h3>

        {# Location #}
        {% if company.city or company.country %}
            <p class="text-sm text-gray-500 mb-4 flex items-center">
                <i class="fas fa-map-marker-alt mr-1.5 text-gray-400"></i>
                {% if company.city %}{{ company.city }}{% endif %}{% if company.city and company.country %}, {% endif %}{% if company.country %}{{ company.country }}{% endif %}
            </p>
        {% endif %}

        {# Description (truncated) #}
        {% if company.description %}
            <p class="text-sm text-gray-600 mb-4 line-clamp-2">
                {{ company.description }}
            </p>
        {% endif %}

        {# Contact Information #}
        <div class="space-y-2 mb-4">
            {% if company.email %}
                <div class="flex items-center text-sm text-gray-600">
                    <i class="fas fa-envelope w-5 text-gray-400 mr-2"></i>
                    <span class="truncate">{{ company.email }}</span>
                </div>
            {% endif %}

            {% if company.phone %}
                <div class="flex items-center text-sm text-gray-600">
                    <i class="fas fa-phone w-5 text-gray-400 mr-2"></i>
                    <span class="truncate">{{ company.phone }}</span>
                </div>
            {% endif %}

            {% if company.website %}
                <div class="flex items-center text-sm text-gray-600">
                    <i class="fas fa-globe w-5 text-gray-400 mr-2"></i>
                    <a href="{{ company.website }}" target="_blank" rel="noopener noreferrer"
                       class="truncate hover:text-indigo-600 transition-colors duration-150">
                        {{ company.website|replace({'https://': '', 'http://': ''}) }}
                    </a>
                </div>
            {% endif %}
        </div>

        {# Legal Info (compact) #}
        {% if company.ninea or company.rccm %}
            <div class="flex gap-3 text-xs text-gray-500 mb-4 pb-4 border-b border-gray-100">
                {% if company.ninea %}
                    <div>
                        <span class="font-medium">NINEA:</span> {{ company.ninea }}
                    </div>
                {% endif %}
                {% if company.rccm %}
                    <div>
                        <span class="font-medium">RCCM:</span> {{ company.rccm }}
                    </div>
                {% endif %}
            </div>
        {% endif %}

        {# Creation Date #}
        {% if company.createdAt %}
            <div class="text-xs text-gray-500 mb-4">
                <i class="fas fa-calendar mr-1"></i>
                Créée le {{ company.createdAt|date('d/m/Y') }}
            </div>
        {% endif %}

        {# Action Buttons #}
        <div class="pt-4 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>
</div>