{% extends 'base.html.twig' %}

{% block title %}{{ results.media.title }} — Download Options — Torsearch{% endblock %}

{% block body %}
    <div class="p-4 flex flex-col grow gap-4">
        <h2 class="mb-2 text-3xl font-bold text-gray-50">Media Results</h2>
        <div class="flex flex-row w-full gap-2">
            <twig:Card title="" contentClass="flex flex-col gap-4 justify-between w-full text-gray-50">
                <div class="p-4 flex flex-row gap-6">
                    <img class="w-40" src="{{ results.media.poster }}" />
                    <div class="w-full flex flex-col">
                        <h3 class="mb-4 text-xl font-medium leading-tight font-bold text-gray-50">
                            {{ results.media.title }} - {{ results.media.year }}
                        </h3>
                        <p class="text-gray-50">
                            {{ results.media.description }}
                        </p>
                    </div>
                    <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" />
                    </span>
                </div>

                <div id="filter" class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg"
                     {{ stimulus_controller('result_filter') }}
                >
                    <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-sm">
                            <option {{ filter.resolution == "n/a" ? "selected" }}
                                    value="">n/a</option>
                            <option {{ filter.resolution == "720p" ? "selected" }}
                                    value="720p">780p</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-sm">
                            <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-sm">
                            <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-sm">
                            <option selected value="">n/a</option>
                        </select>
                    </label>
                    {% if results.media.mediaType == "tvshows" %}
                        <label for="season">
                            Season
                            <select id="season" name="season" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
                                <option selected value="">n/a</option>
                            </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 %}
                </div>

                {% if "movies" == results.media.mediaType %}
                <div class="results" {{ stimulus_controller('movie_results', {imdbId: results.media.imdbId}) }}>
                </div>
                {% elseif "tvshows" == results.media.mediaType %}
                    {% for season, episodes in results.media.episodes %}
                        {% set active = (season == '1') ? true : false %}
                        {% for episode in episodes %}
                            <div class="{{ (active == false) ? 'hidden' }}"
                                 data-tv-results-loading-icon-outlet=".loading-icon"
                                 {{ stimulus_controller('tv_results', {
                                    tmdbId: results.media.tmdbId,
                                    imdbId: results.media.imdbId,
                                    season: season,
                                    episode: episode['episode_number'],
                                    active: active,
                            }) }}></div>
                        {% endfor %}
                    {% endfor %}
                {% endif %}

            </twig:Card>
        </div>
    </div>
{% endblock %}