<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 {{ results.media.mediaType == "tvshows" ? "hidden" }}"
       {{ stimulus_target(controller, "list") }}
>
    <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
    <tr class="dark:bg-stone-600 overflow-hidden">
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Size
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Resolution
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Codec
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Seeders
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Provider
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Language
        </th>
        <th scope="col"
            class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
        </th>
    </tr>
    </thead>
    <tbody>
    {% for result in results.results %}
        <tr class="bg-white border-b dark:bg-slate-700 dark:border-gray-600 border-gray-200" data-provider="{{ result.provider }}" data-languages="{{ result.languages|json_encode }}" {% if "tvshows" == results.media.mediaType %} data-season="{{ results.season }} {% endif %}">
            <td id="size" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.size }}
            </td>
            <td id="resolution" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.resolution }}
            </td>
            <td id="codec" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.codec }}
            </td>
            <td id="seeders" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.seeders }}
            </td>
            <td id="provider" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-provider="{{ result.provider }}">
                {{ result.provider }}
            </td>
            <td id="language" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50" data-languages="{{ result.languages|json_encode }}">
                {{ result.languageFlags|raw }}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-end">
                        <button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50"
                            {{ stimulus_controller('download_button', {
                                url: result.url,
                                title: results.media.title,
                                filename: result.filename,
                                mediaType: results.media.mediaType,
                                imdbId: results.media.imdbId
                            }) }}
                            {{ stimulus_action('download_button', 'download', 'click') }}
                        >
                            Download
                        </button>
                <label for="select">
                    <input id="select" type="checkbox" name="select" />
                </label>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>