{#
    Document Grid Card Component
    Used in grid view for document listing

    Required variables:
    - media: Media entity
    - company: Company entity (for actions context)
#}
<div class="relative bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-lg transition-all duration-200 overflow-hidden group document-card" data-document-id="{{ media.id }}">
    {# Selection Checkbox - Top Left Corner #}
    <div class="absolute top-3 left-3 z-20 bg-white rounded shadow-sm">
        <input type="checkbox"
               name="document_ids[]"
               value="{{ media.id }}"
               class="document-checkbox h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded cursor-pointer"
               data-document-id="{{ media.id }}"
               data-action="change->folder-explorer#toggleDocumentSelection"
               onclick="event.stopPropagation()">
    </div>

    {# Card Header with Preview #}
    <div class="relative h-40 bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center overflow-hidden">
        {% if media.category == 'image' or media.mimeType starts with 'image/' %}
            {# Image preview #}
            <img src="{{ path(media_download_route(), {id: media.id}) }}"
                 alt="{{ media.originalFileName }}"
                 class="h-full w-full object-cover group-hover:scale-110 transition-transform duration-300"
                 loading="lazy">
        {% elseif media.mimeType starts with 'video/' %}
            {# Video icon #}
            <div class="text-center">
                <i class="fas fa-video text-6xl text-purple-400 mb-2"></i>
                <p class="text-xs text-gray-500">Vidéo</p>
            </div>
        {% elseif media.mimeType == 'application/pdf' %}
            {# PDF icon #}
            <div class="text-center">
                <i class="fas fa-file-pdf text-6xl text-red-400 mb-2"></i>
                <p class="text-xs text-gray-500">PDF</p>
            </div>
        {% elseif 'word' in media.mimeType or (media.originalFileName|split('.')|last|lower) in ['doc', 'docx'] %}
            {# Word icon #}
            <div class="text-center">
                <i class="fas fa-file-word text-6xl text-blue-400 mb-2"></i>
                <p class="text-xs text-gray-500">Word</p>
            </div>
        {% elseif 'excel' in media.mimeType or 'spreadsheet' in media.mimeType or (media.originalFileName|split('.')|last|lower) in ['xls', 'xlsx'] %}
            {# Excel icon #}
            <div class="text-center">
                <i class="fas fa-file-excel text-6xl text-green-400 mb-2"></i>
                <p class="text-xs text-gray-500">Excel</p>
            </div>
        {% elseif 'powerpoint' in media.mimeType or 'presentation' in media.mimeType or (media.originalFileName|split('.')|last|lower) in ['ppt', 'pptx'] %}
            {# PowerPoint icon #}
            <div class="text-center">
                <i class="fas fa-file-powerpoint text-6xl text-orange-400 mb-2"></i>
                <p class="text-xs text-gray-500">PowerPoint</p>
            </div>
        {% elseif 'zip' in media.mimeType or 'rar' in media.mimeType or 'archive' in media.mimeType %}
            {# Archive icon #}
            <div class="text-center">
                <i class="fas fa-file-archive text-6xl text-yellow-400 mb-2"></i>
                <p class="text-xs text-gray-500">Archive</p>
            </div>
        {% else %}
            {# Generic file icon #}
            <div class="text-center">
                <i class="fas fa-file text-6xl text-gray-400 mb-2"></i>
                <p class="text-xs text-gray-500">Fichier</p>
            </div>
        {% endif %}

        {# Visibility Badge - Top Right #}
        <div class="absolute top-2 right-2">
            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium shadow-sm
                {% if media.visibility == 'public' %}bg-green-100 text-green-800
                {% elseif media.visibility == 'protected' %}bg-yellow-100 text-yellow-800
                {% else %}bg-blue-100 text-blue-800
                {% endif %}">
                <i class="fas fa-{{ media.visibility == 'public' ? 'globe' : (media.visibility == 'protected' ? 'shield-alt' : 'lock') }} mr-1"></i>
                {{ media.visibility|upper }}
            </span>
        </div>

        {# Category Badge - Bottom Left #}
        {% if media.documentCategory %}
            <div class="absolute bottom-2 left-2">
                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium shadow-sm {{ media.documentCategory.badgeColorClass }}">
                    <i class="fas {{ media.documentCategory.icon }} mr-1"></i>
                    {{ media.documentCategory.name }}
                </span>
            </div>
        {% endif %}
    </div>

    {# Card Body #}
    <div class="p-5">
        {# Document Name #}
        <h3 class="text-sm font-semibold text-gray-900 mb-2 truncate" title="{{ media.originalFileName }}">
            {{ media.originalFileName }}
        </h3>

        {# File Type (Clean label instead of MIME type) #}
        <p class="text-xs text-gray-500 mb-4 truncate">
            {% if media.mimeType == 'application/pdf' %}
                PDF
            {% elseif 'word' in media.mimeType or 'document' in media.mimeType %}
                Document Word
            {% elseif 'excel' in media.mimeType or 'spreadsheet' in media.mimeType %}
                Feuille Excel
            {% elseif 'powerpoint' in media.mimeType or 'presentation' in media.mimeType %}
                Présentation PowerPoint
            {% elseif 'image/' in media.mimeType %}
                Image ({{ media.mimeType|split('/')|last|upper }})
            {% elseif 'video/' in media.mimeType %}
                Vidéo ({{ media.mimeType|split('/')|last|upper }})
            {% elseif 'audio/' in media.mimeType %}
                Audio ({{ media.mimeType|split('/')|last|upper }})
            {% elseif 'text/' in media.mimeType %}
                Fichier texte
            {% elseif 'zip' in media.mimeType or 'compressed' in media.mimeType or 'archive' in media.mimeType %}
                Archive
            {% else %}
                {{ media.mimeType|split('/')|last|upper }}
            {% endif %}
        </p>

        {# Document Info Grid #}
        <div class="space-y-2.5 mb-5 text-xs text-gray-600">
            {# File Size #}
            <div class="flex items-center justify-between">
                <span class="text-gray-500">Taille :</span>
                <span class="font-medium">{{ media.formattedFileSize }}</span>
            </div>

            {# Uploaded By #}
            {% if media.uploadedBy %}
                <div class="flex items-center justify-between">
                    <span class="text-gray-500">Par :</span>
                    <div class="flex items-center">
                        <img class="h-5 w-5 rounded-full mr-1" src="{{ media.uploadedBy.profilePhoto|profile_picture_url }}" alt="{{ media.uploadedBy.fullName }}">
                        <span class="font-medium truncate max-w-[120px]">{{ media.uploadedBy.fullName }}</span>
                    </div>
                </div>
            {% endif %}

            {# Upload Date #}
            <div class="flex items-center justify-between">
                <span class="text-gray-500">Date :</span>
                <span class="font-medium">
                    <i class="fas fa-calendar mr-1 text-gray-400"></i>
                    {{ media.createdAt|date('d/m/Y') }}
                </span>
            </div>

            {# Expiration Date #}
            {% if media.expiresAt %}
                <div class="flex items-center justify-between pt-2 border-t border-gray-100">
                    <span class="text-gray-500">Expiration :</span>
                    {% set now = 'now'|date('U') %}
                    {% set expirationDate = media.expiresAt|date('U') %}
                    {% set daysLeft = ((expirationDate - now) / 86400)|round(0, 'floor') %}

                    {% if daysLeft < 0 %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                            <i class="fas fa-exclamation-circle mr-1"></i>
                            Expiré
                        </span>
                    {% elseif daysLeft <= 7 %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                            <i class="fas fa-clock mr-1"></i>
                            {{ daysLeft }}j
                        </span>
                    {% elseif daysLeft <= 30 %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                            <i class="fas fa-info-circle mr-1"></i>
                            {{ daysLeft }}j
                        </span>
                    {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-check-circle mr-1"></i>
                            OK
                        </span>
                    {% endif %}
                </div>
            {% endif %}

            {# Tags #}
            {% if media.tags is not empty %}
                <div class="pt-2 border-t border-gray-100">
                    <span class="text-gray-500 mb-1 block">Tags :</span>
                    <div class="flex flex-wrap gap-1">
                        {% for tag in media.tags %}
                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ tag.badgeColorClass }}">
                                {% if tag.icon %}
                                    <i class="fas {{ tag.icon }} mr-1"></i>
                                {% endif %}
                                {{ tag.name }}
                            </span>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {# Type Badge #}
            <div class="pt-2 border-t border-gray-100">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                    {{ media.category|upper }}
                </span>
            </div>
        </div>

        {# Actions #}
        <div class="flex items-center gap-1 pt-3 border-t border-gray-100">
            {% if not company.deletedAt and (is_granted('ROLE_ADMIN') or is_granted('ROLE_MANAGER')) %}
                <button type="button"
                        onclick="openEditModal({{ media.id }})"
                        class="flex-1 inline-flex items-center justify-center px-2 py-1.5 text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-150">
                    <i class="fas fa-edit mr-1"></i>
                    Éditer
                </button>
            {% endif %}
            <a href="{{ media_download_url(media) }}"
               data-turbo="false"
               target="_blank"
               class="flex-1 inline-flex items-center justify-center px-2 py-1.5 text-xs font-medium rounded text-blue-600 hover:bg-blue-50 transition-colors duration-150">
                <i class="fas fa-download mr-1"></i>
                Télécharger
            </a>
            <a href="{{ media_show_url(media, 'company_documents', company.id, company.name) }}"
               target="_blank"
               rel="noopener noreferrer"
               class="flex-1 inline-flex items-center justify-center px-2 py-1.5 text-xs font-medium rounded text-gray-600 hover:bg-gray-50 transition-colors duration-150">
                <i class="fas fa-eye mr-1"></i>
                Voir
            </a>
        </div>
    </div>
</div>