{#
    Media Card Component - Grid card for gallery view

    Parameters:
    - media: Media entity
#}

<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300 overflow-hidden group">
    {# Preview Section #}
    <a href="{{ path('app_manager_media_show', {id: media.id}) }}" class="block">
        <div class="relative h-48 bg-gray-100 overflow-hidden">
            {% if media.isImage %}
                {# Image Preview #}
                <img src="{{ asset('media/' ~ media.filePath) }}"
                     alt="{{ media.originalFileName }}"
                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                     onerror="this.onerror=null; this.src='data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'200\' height=\'200\'%3E%3Crect fill=\'%23f3f4f6\' width=\'200\' height=\'200\'/%3E%3Ctext fill=\'%239ca3af\' font-family=\'Arial\' font-size=\'14\' x=\'50%25\' y=\'50%25\' text-anchor=\'middle\' dy=\'.3em\'%3EImage non disponible%3C/text%3E%3C/svg%3E';">
                <div class="absolute top-2 right-2 bg-purple-600 text-white px-2 py-1 rounded text-xs font-medium">
                    <i class="fas fa-image mr-1"></i>
                    IMAGE
                </div>
            {% elseif media.category == 'video' %}
                {# Video Icon #}
                <div class="flex items-center justify-center h-full bg-gradient-to-br from-red-100 to-pink-100">
                    <i class="fas fa-video text-6xl text-red-500"></i>
                </div>
                <div class="absolute top-2 right-2 bg-red-600 text-white px-2 py-1 rounded text-xs font-medium">
                    <i class="fas fa-video mr-1"></i>
                    VIDÉO
                </div>
            {% elseif media.category == 'audio' %}
                {# Audio Icon #}
                <div class="flex items-center justify-center h-full bg-gradient-to-br from-blue-100 to-indigo-100">
                    <i class="fas fa-music text-6xl text-blue-500"></i>
                </div>
                <div class="absolute top-2 right-2 bg-blue-600 text-white px-2 py-1 rounded text-xs font-medium">
                    <i class="fas fa-music mr-1"></i>
                    AUDIO
                </div>
            {% else %}
                {# Document Icon #}
                <div class="flex items-center justify-center h-full bg-gradient-to-br from-purple-100 to-indigo-100">
                    <i class="fas fa-{{ media.mimeType == 'application/pdf' ? 'file-pdf' : 'file-alt' }} text-6xl text-purple-500"></i>
                </div>
                <div class="absolute top-2 right-2 bg-purple-600 text-white px-2 py-1 rounded text-xs font-medium">
                    <i class="fas fa-file mr-1"></i>
                    {{ media.mimeType == 'application/pdf' ? 'PDF' : 'DOC' }}
                </div>
            {% endif %}

            {# Overlay on hover #}
            <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                <div class="opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <span class="inline-flex items-center px-4 py-2 bg-white rounded-full text-sm font-medium text-gray-900 shadow-lg">
                        <i class="fas fa-eye mr-2"></i>
                        Voir les détails
                    </span>
                </div>
            </div>
        </div>
    </a>

    {# Info Section #}
    <div class="p-4">
        {# Filename #}
        <h3 class="text-sm font-semibold text-gray-900 truncate mb-2" title="{{ media.originalFileName }}">
            {{ media.originalFileName }}
        </h3>

        {# Metadata #}
        <div class="flex items-center justify-between text-xs text-gray-500 mb-3">
            <span>
                <i class="fas fa-hdd mr-1"></i>
                {{ media.formattedFileSize }}
            </span>
            <span>
                <i class="fas fa-calendar mr-1"></i>
                {{ media.createdAt|date('d/m/Y') }}
            </span>
        </div>

        {# Category & Visibility Badges #}
        <div class="flex items-center gap-2 mb-3 flex-wrap">
            {% if media.documentCategory %}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ media.documentCategory.badgeColorClass }}">
                    <i class="fas {{ media.documentCategory.icon }} mr-1"></i>
                    {{ media.documentCategory.name }}
                </span>
            {% endif %}

            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                {% if media.visibility == 'protected' %}bg-yellow-100 text-yellow-800
                {% else %}bg-blue-100 text-blue-800{% endif %}">
                <i class="fas fa-{{ media.visibility == 'protected' ? 'shield-alt' : 'lock' }} mr-1"></i>
                {{ media.visibility|upper }}
            </span>
        </div>

        {# Actions #}
        <div class="flex items-center gap-2">
            <a href="{{ path('app_manager_media_show', {id: media.id}) }}"
               class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-purple-600 rounded-md text-sm font-medium text-purple-600 bg-white hover:bg-purple-50 transition-colors duration-150">
                <i class="fas fa-eye mr-1.5"></i>
                Voir
            </a>
            <a href="{{ path('app_manager_media_download', {id: media.id}) }}"
               data-turbo="false"
               download
               class="flex-1 inline-flex items-center justify-center px-3 py-2 border border-transparent rounded-md text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 transition-colors duration-150">
                <i class="fas fa-download mr-1.5"></i>
                Télécharger
            </a>
        </div>
    </div>
</div>