<div id="filter" class="flex flex-col gap-4"
        {{ stimulus_controller('result_filter') }}
        {{ stimulus_action('result_filter', 'filter', 'change') }}
     data-result-filter-media-type-value="{{ results.media.mediaType }}"
     data-result-filter-movie-results-outlet=".results"
     data-result-filter-tv-results-outlet=".results"
>
    <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
        <label for="resolution">
            Resolution
            <select id="resolution"
                    data-result-filter-target="resolution"
                    class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
                    value="{{ app.user.userPreferenceValues["resolution"] }}"
            >
                <option {{ filter.resolution == "n/a" ? "selected" }}
                        value="">n/a</option>
                <option {{ filter.resolution == "720p" ? "selected" }}
                        value="720p">720p</option>
                <option {{ filter.resolution == "1080p" ? "selected" }}
                        value="1080p">1080p</option>
                <option {{ filter.resolution == "2160p" ? "selected" }}
                        value="2160p">2160p</option>
            </select>
        </label>
        <label for="codec">
            Codec
            <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-md">
                <option {{ filter.codec == "n/a" ? "selected" }}
                        value="">n/a</option>
                <option {{ filter.codec == "-" ? "selected" }}
                        value="-">-</option>
                <option {{ filter.codec == "h264" ? "selected" }}
                        value="h264">h264</option>
                <option {{ filter.codec == "h265" ? "selected" }}
                        value="h265">h265/HEVC</option>
            </select>
        </label>
        <label for="language">
            Language
            <select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
                <option selected value="{{ filter.language }}">{{ filter.language }}</option>
            </select>
        </label>
        <label for="provider">
            Provider
            <select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
                <option selected value="">n/a</option>
            </select>
        </label>
        {% if results.media.mediaType == "tvshows" %}
            <label for="season">
                Season
                <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}>
                    <option selected value="1">1</option>
                    {% for season in range(2, results.media.episodes|length) %}
                        <option value="{{ season }}">{{ season }}</option>
                    {% endfor %}
                </select>
            </label>
            {#                        <label for="episodeNumber">#}
            {#                            Episode#}
            {#                            <select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">#}
            {#                                <option selected value="">n/a</option>#}
            {#                            </select>#}
            {#                        </label>#}
        {% endif %}
        <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
            class="loading-icon"
        >
            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
        </span>
    </div>

    {% if results.media.mediaType == "tvshows" %}
    <div class="flex flex-row gap-2 justify-end px-8">
        <button class="px-1.5 py-1 bg-green-600 rounded-md text-sm"
                {{ stimulus_target('result_filter', 'downloadSelected') }}
                {{ stimulus_action('result_filter', 'downloadSelectedEpisodes', 'click') }}
        >Download Selected</button>
        <input type="checkbox" name="selectAll" id="selectAll"
                {{ stimulus_target('result_filter', 'selectAll') }}
                {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
        />
    </div>
    {% endif %}
</div>