{#
    Filters Panel Component
    Advanced search and filtering interface for documents

    Required variables:
    - company: Company entity
    - searchQuery: Current search query
    - selectedFileType: Selected file type filter
    - selectedExpiration: Selected expiration filter
    - dateFrom: Filter start date
    - dateTo: Filter end date
    - selectedUploader: Selected uploader user ID
    - uploaders: Array of users who have uploaded documents
    - sortBy: Current sort option
    - selectedCategory: Selected category ID
    - selectedTag: Selected tag ID
    - viewMode: Current view mode (table/grid)
#}

<div class="mb-6 bg-white shadow rounded-lg p-5">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-lg font-medium text-gray-900">
            <i class="fas fa-filter mr-2 text-indigo-600"></i>
            Filtres de recherche
        </h3>
        {% if searchQuery or selectedFileType or selectedExpiration or dateFrom or dateTo or selectedUploader %}
            <a href="{{ path('admin_companies_documents', {'id': company.id}) }}"
               class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-red-600 hover:text-red-800">
                <i class="fas fa-times-circle mr-1"></i>
                Réinitialiser tous les filtres
            </a>
        {% endif %}
    </div>

    <form method="get" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {# Search Input #}
        <div class="col-span-full md:col-span-2">
            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-search mr-1"></i>
                Rechercher
            </label>
            <input type="text"
                   name="search"
                   id="search"
                   value="{{ searchQuery }}"
                   placeholder="Nom du fichier ou description..."
                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
        </div>

        {# File Type Filter #}
        <div>
            <label for="file_type" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-file mr-1"></i>
                Type de fichier
            </label>
            <select name="file_type"
                    id="file_type"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                <option value="">Tous les types</option>
                <option value="pdf" {{ selectedFileType == 'pdf' ? 'selected' : '' }}>PDF</option>
                <option value="image" {{ selectedFileType == 'image' ? 'selected' : '' }}>Images</option>
                <option value="video" {{ selectedFileType == 'video' ? 'selected' : '' }}>Vidéos</option>
                <option value="document" {{ selectedFileType == 'document' ? 'selected' : '' }}>Documents</option>
                <option value="excel" {{ selectedFileType == 'excel' ? 'selected' : '' }}>Excel</option>
                <option value="word" {{ selectedFileType == 'word' ? 'selected' : '' }}>Word</option>
            </select>
        </div>

        {# Expiration Filter #}
        <div>
            <label for="expiration" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-calendar-times mr-1"></i>
                Expiration
            </label>
            <select name="expiration"
                    id="expiration"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                <option value="">Toutes les expirations</option>
                <option value="expired" {{ selectedExpiration == 'expired' ? 'selected' : '' }}>Expirés</option>
                <option value="expiring_soon" {{ selectedExpiration == 'expiring_soon' ? 'selected' : '' }}>Expire sous 7 jours</option>
                <option value="expiring_month" {{ selectedExpiration == 'expiring_month' ? 'selected' : '' }}>Expire sous 30 jours</option>
                <option value="no_expiration" {{ selectedExpiration == 'no_expiration' ? 'selected' : '' }}>Sans expiration</option>
            </select>
        </div>

        {# Date From #}
        <div>
            <label for="date_from" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-calendar-alt mr-1"></i>
                Date début
            </label>
            <input type="date"
                   name="date_from"
                   id="date_from"
                   value="{{ dateFrom }}"
                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
        </div>

        {# Date To #}
        <div>
            <label for="date_to" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-calendar-alt mr-1"></i>
                Date fin
            </label>
            <input type="date"
                   name="date_to"
                   id="date_to"
                   value="{{ dateTo }}"
                   class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
        </div>

        {# Uploader Filter #}
        {% if uploaders is not empty %}
            <div>
                <label for="uploader" class="block text-sm font-medium text-gray-700 mb-1">
                    <i class="fas fa-user mr-1"></i>
                    Téléversé par
                </label>
                <select name="uploader"
                        id="uploader"
                        class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                    <option value="">Tous les utilisateurs</option>
                    {% for uploader in uploaders %}
                        <option value="{{ uploader.userId }}" {{ selectedUploader == uploader.userId ? 'selected' : '' }}>
                            {{ uploader.firstName }} {{ uploader.lastName }}
                        </option>
                    {% endfor %}
                </select>
            </div>
        {% endif %}

        {# Sort By #}
        <div>
            <label for="sort" class="block text-sm font-medium text-gray-700 mb-1">
                <i class="fas fa-sort mr-1"></i>
                Trier par
            </label>
            <select name="sort"
                    id="sort"
                    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
                <option value="date_desc" {{ sortBy == 'date_desc' ? 'selected' : '' }}>Date (plus récent)</option>
                <option value="date_asc" {{ sortBy == 'date_asc' ? 'selected' : '' }}>Date (plus ancien)</option>
                <option value="name_asc" {{ sortBy == 'name_asc' ? 'selected' : '' }}>Nom (A-Z)</option>
                <option value="name_desc" {{ sortBy == 'name_desc' ? 'selected' : '' }}>Nom (Z-A)</option>
                <option value="size_asc" {{ sortBy == 'size_asc' ? 'selected' : '' }}>Taille (petit → grand)</option>
                <option value="size_desc" {{ sortBy == 'size_desc' ? 'selected' : '' }}>Taille (grand → petit)</option>
                <option value="expiration_asc" {{ sortBy == 'expiration_asc' ? 'selected' : '' }}>Expiration (plus proche)</option>
                <option value="expiration_desc" {{ sortBy == 'expiration_desc' ? 'selected' : '' }}>Expiration (plus loin)</option>
            </select>
        </div>

        {# Hidden inputs to preserve other filters #}
        <input type="hidden" name="category" value="{{ selectedCategory }}">
        <input type="hidden" name="tag" value="{{ selectedTag }}">
        <input type="hidden" name="view" value="{{ viewMode }}">

        {# Submit Button #}
        <div class="col-span-full flex items-end justify-end gap-3">
            <button type="submit"
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all">
                <i class="fas fa-search mr-2"></i>
                Appliquer les filtres
            </button>
        </div>
    </form>
</div>