<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 action-button:downloadSeason@window->result-filter#downloadSeason"
>

    {% set preferences_form = form %}
    {{ form_start(preferences_form) }}
    <h3 class="font-bold text-lg mb-2 md:mb-4">What type of file do you want?</h3>
    <div class="flex flex-col md:flex-row gap-2 justify-between">
            {{ form_row(preferences_form.resolution) }}
            {{ form_row(preferences_form.codec) }}
            {{ form_row(preferences_form.language) }}
            {{ form_row(preferences_form.provider) }}
            {{ form_row(preferences_form.quality) }}

            {% if results.media.mediaType == "tvshows" %}
                <div class="flex flex-col gap-1 md:gap-3">
                    <label for="season">
                        Season
                    </label>
                    <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 mb-4 py-1 md:py-2 text-center bg-orange-500 rounded-ms text-black"
                            {{ stimulus_action('result_filter', 'setSeason', 'change') }}
                            {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}
                    >
                        {% for season in range(1, results.media.episodes|length) %}
                            <option value="{{ season }}"
                                    {% if results.season == season %}
                                        selected="selected"
                                    {% endif %}
                            >{{ season }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% endif %}
        </div>
    {% if results.media.mediaType == "movies" %}
        <div class="w-full flex-col md:flex-row justify-between gap-2">
            <download-media-button
                    class="px-2 py-1 bg-green-500 bg-opacity-60 font-medium rounded-lg text-sm cursor-pointer self-end"
                    title="Download {{ results.media.title }}"
                    media-type="{{ results.media.mediaType }}"
                    imdb-id="{{ results.media.imdbId }}">
                download
            </download-media-button>
        </div>
    {% endif %}
    {{ form_end(preferences_form) }}

    <div class="flex flex-col-reverse md:flex-row justify-between">
        {% if results.media.mediaType == "tvshows" %}
            <p class="ml-2 mt-3 md:[margin-top:unset] md:self-center">Season <span data-result-filter-target="currentSeason" class="current-season">{{ results.season }}</span></p>
            <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 border border-green-500 bg-green-800/60 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-800/60 hover:bg-green-700/60 border border-green-500 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>
</div>