<div id="filter" class="flex flex-col gap-4"
        {{ stimulus_controller('result_filter', {reverseMappedQualities: this.reverseMappedQualities, imdbId: results.media.imdbId}) }}
     data-result-filter-media-type-value="{{ results.media.mediaType }}"
     data-result-filter-movie-results-outlet=".results"
     data-result-filter-tv-results-outlet=".results"
     data-result-filter-tv-episode-list-outlet=".episode-list"
     data-action="change->result-filter#filter movie-results:optionsLoaded@window->result-filter#loadOptions tv-results:optionsLoaded@window->result-filter#loadOptions action-button:downloadSeason@window->result-filter#downloadSeason"
>
    <div class="w-full p-4 flex flex-col md: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 value="">n/a</option>
                {% for option in this.preferences['resolution'] %}
                <option value="{{ option.value }}"
                        {{ option.value == this.userPreferences['resolution'] ? 'selected' }}
                >{{ option.name }}</option>
                {% endfor %}
            </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 value="">n/a</option>
                {% for option in this.preferences['codec'] %}
                    <option value="{{ option.value }}"
                            {{ option.value == this.userPreferences['codec'] ? 'selected' }}
                    >{{ option.name }}</option>
                {% endfor %}
            </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"
                    {% if this.userPreferences['language'] != null %}
                        data-preferred="{{ this.userPreferences['language'] }}"
                    {% endif %}
            >
            </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"
                    {% if this.userPreferences['provider'] != null %}
                        data-preferred="{{ this.userPreferences['provider'] }}"
                    {% endif %}
            >
            </select>
        </label>
        <label for="quality">
            Quality
            <select id="quality"
                    data-result-filter-target="quality"
                    class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
                    {% if this.userPreferences['quality'] != null %}
                        data-preferred="{{ this.userPreferences['quality'] }}"
                    {% endif %}
            >
            </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', 'setSeason', 'change') }}
                        {{ 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">
            <twig:Modal heading="Back up a sec!" button_text="Download Season" submit_action="{{ stimulus_action('result_filter', 'downloadSeason', 'click')|stimulus_action('dialog', 'close') }}" button_class="px-1.5 py-1 bg-green-600 rounded-ms text-sm font-semibold" show_cancel show_submit>
                Downloading an entire season this way will use the filter from your
                <a href="{{ path('app_user_preferences') }}" class="text-underline">preferences</a> to choose
                the appropriate file(s).
                <br /><br />
                Do you wish to download <strong>season <span id="downloadSeasonModal">{{ results.season }}</span></strong> of "<strong>{{ results.media.title }}</strong>"?
            </twig:Modal>

            <button class="px-1.5 py-1 bg-green-600 hover:bg-green-700 rounded-ms text-sm font-semibold"
                    {{ 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>