{#
    Document Table Row Component
    Single row in the documents table

    Required variables:
    - media: Media entity
    - company: Company entity
#}

{% import 'admin/companies/documents/_macros.html.twig' as docs %}

<tr class="hover:bg-gray-50 transition-colors duration-150 document-row" data-document-id="{{ media.id }}">
    {# Selection Checkbox #}
    <td class="w-12 px-6 py-4">
        <input type="checkbox"
               name="document_ids[]"
               value="{{ media.id }}"
               class="document-checkbox h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded cursor-pointer"
               data-document-id="{{ media.id }}"
               data-action="change->folder-explorer#toggleDocumentSelection">
    </td>

    {# Fichier Info #}
    <td class="px-6 py-4">
        <div class="flex items-center">
            <div class="flex-shrink-0 h-10 w-10 flex items-center justify-center bg-gray-100 rounded">
                {% if media.category == 'image' %}
                    <img src="{{ path(media_download_route(), {id: media.id}) }}"
                         alt="{{ media.originalFileName }}"
                         class="h-10 w-10 rounded object-cover"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <i class="fas fa-image text-2xl text-gray-600" style="display:none;"></i>
                {% else %}
                    <i class="fas fa-{{ media.category == 'video' ? 'video' : (media.category == 'document' ? 'file-pdf' : 'file') }} text-2xl text-gray-600"></i>
                {% endif %}
            </div>
            <div class="ml-4">
                <div class="text-sm font-medium text-gray-900 truncate max-w-[200px]" title="{{ media.originalFileName }}">
                    {{ media.originalFileName }}
                </div>
                <div class="text-xs text-gray-500 truncate">
                    {{ media.mimeType }}
                </div>
            </div>
        </div>
    </td>

    {# Catégorie #}
    <td class="px-6 py-4 whitespace-nowrap">
        {% if media.documentCategory %}
            <span class="inline-flex items-center px-2.5 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>
        {% else %}
            <span class="text-sm text-gray-400 italic">Sans catégorie</span>
        {% endif %}
    </td>

    {# Tags #}
    <td class="px-6 py-4">
        {% if media.tags is not empty %}
            <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>
        {% else %}
            <button type="button"
                    onclick="openAddTagsModal({{ media.id }})"
                    class="text-xs text-gray-400 hover:text-indigo-600 transition-colors">
                <i class="fas fa-plus-circle mr-1"></i>
                Ajouter tags
            </button>
        {% endif %}
    </td>

    {# Expiration using macro #}
    <td class="px-6 py-4 whitespace-nowrap">
        {{ docs.expiration_badge(media) }}
    </td>

    {# Type #}
    <td class="px-6 py-4 whitespace-nowrap">
        <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>
    </td>

    {# Taille #}
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
        {{ media.formattedFileSize }}
    </td>

    {# Téléversé par #}
    <td class="px-6 py-4 whitespace-nowrap">
        <div class="flex items-center">
            <div class="flex-shrink-0 h-8 w-8">
                <img class="h-8 w-8 rounded-full" src="{{ media.uploadedBy.profilePhoto|profile_picture_url }}" alt="{{ media.uploadedBy.fullName }}">
            </div>
            <div class="ml-3">
                <div class="text-sm font-medium text-gray-900">
                    {{ media.uploadedBy.fullName }}
                </div>
            </div>
        </div>
    </td>

    {# Date #}
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {{ media.createdAt|date('d/m/Y H:i') }}
    </td>

    {# Actions using macro #}
    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
        {{ docs.document_actions(media, company, 'compact') }}
    </td>
</tr>