<table class="w-full max-w-[75vw] text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 flex-row flex-no-wrap options-table"
       {{ stimulus_target(controller, "list") }}
>
    <thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
    {% for result in results.results %}
    <tr data-option-id="{{ result.localId }}" class="dark:bg-stone-600 overflow-hidden flex flex-col md:flex-col flex-no wrap md:table-row border-b border-gray-500">
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Size
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Quality
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Resolution
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Codec
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Seeders
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Provider
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[20px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Language
        </th>
        <th scope="col"
            class="px-4 py-4 leading-[32px] font-medium text-gray-900 whitespace-nowrap dark:text-white">
            Actions
        </th>
    </tr>
    {% endfor %}
    </thead>
    <tbody class="flex-1 sm:flex-none">
    {% for result in results.results %}
        <tr is="dl-tr"
            class="download-option bg-white dark:bg-slate-700 flex flex-col flex-no wrap r-tablerow border-b border-gray-500"
            url="{{ result.url }}"
            size="{{ result.size }}"
            quality="{{ result.quality }}"
            resolution="{{ result.resolution }}"
            codec="{{ result.codec }}"
            seeders="{{ result.seeders }}"
            provider="{{ result.provider }}"
            languages="{{ result.languages|json_encode }}"
            media-type="{{ results.media.mediaType }}"
            imdb-id="{{ result.imdbId }}"
            filename="{{ result.filename }}"
            data-local-id="{{ result.localId }}"
            {% if "tvshows" == results.media.mediaType %}
                season="{{ result.season }}"
                episode="{{ result.episodeNumber }}"
                episode-id="{{ episode_id(result.season, result.episodeNumber) }}"
                media-title="{{ results.parentShow.title }}"
            {% else %}
                media-title="{{ results.media.title }}"
            {% endif %}
        >
            <td id="size" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.size }}
            </td>
            <td id="quality" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.quality }}
            </td>
            <td id="resolution" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.resolution }}
            </td>
            <td id="codec" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.codec }}
            </td>
            <td id="seeders" class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50">
                {{ result.seeders }}
            </td>
            <td id="provider" class="px-4 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-4 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-50 overflow-scroll" data-languages="{{ result.languages|json_encode }}">
                {{ result.languageFlags|raw }}
            </td>
            <td class="px-4 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50 flex flex-row gap-2 items-center justify-start mb:justify-end">
                <a href="{{ url('app.torrentio.stream', {url: result.url|base64_encode}) }}" title="Stream in your browser." class="p-1.5 bg-blue-600 rounded-md text-gray-50">
                    <twig:ux:icon name="bi:camera-video" width="20"/>
                </a>

                <button class="download-btn p-1.5 bg-green-600 rounded-md text-gray-50" title="Download to your mounted directory.">
                    <twig:ux:icon name="bi:cloud-download" width="20" />
                </button>

                <a href="{{ result.url }}" title="Download to your local device." class="p-1.5 bg-orange-500 rounded-md text-gray-50">
                    <twig:ux:icon name="bi:download" width="20" />
                </a>

                <label for="select">
                    <input id="select" type="checkbox" name="select" />
                </label>
            </td>
        </tr>
    {% endfor %}
    </tbody>
</table>