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

{% block title %}{{ results.media.title }} &mdash; Download Options &mdash; 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="" class="w-full" contentClass="flex flex-col gap-4 justify-between w-full text-gray-50">
                <div class="p-2 md:p-4 flex flex-col md:flex-row gap-6">
                    {% if results.media.poster != null %}
                        <img class="w-full md:w-40 rounded-lg" src="{{ results.media.poster }}" />
                    {% else %}
                        <div class="w-full md:w-40 h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
                            <twig:ux:icon width="24" name="hugeicons:loading-01" />
                        </div>
                    {% endif %}

                    <div class="w-full flex flex-col">
                        <div class="mb-4 flex flex-row gap-2 justify-between">
                            <h3 class="text-xl font-medium leading-tight font-bold text-gray-50">
                                {{ results.media.title }} - {{ results.media.year }}
                            </h3>

                            {% if results.media.mediaType == "tvshows" %}
                            <div {{ stimulus_controller('monitor_button', {
                                tmdbId: results.media.tmdbId,
                                imdbId: results.media.imdbId,
                                title: results.media.title,
                            })}}
                                data-monitor-button-result-filter-outlet="#filter"
                                data-monitor-button-dialog-outlet=".monitor-modal"
                            >
                                <twig:Modal
                                        unique_class="monitor-modal"
                                        button_class="h-8 text-white bg-green-800 bg-opacity-60 font-medium rounded-lg text-sm
                                        px-2 py-1.5 text-center inline-flex items-center hover:bg-green-900 border-2
                                        border-green-500"
                                        container_class="monitor-modal"
                                        heading="'Hol Up!" button_text="Monitor" submit_action="{{ stimulus_action('monitor_button', 'monitorSeries', 'click') }}" show_cancel show_submit
                                >
                                    Monitoring a series will continuously search for new episodes and attempt to automatically download them. Your download preferences
                                    will be used to choose the correct file. To stop monitoring for new episodes, delete the monitor.
                                    <br /><br />
                                    Would you like to add a new monitor for "{{ results.media.title }}"?
                                </twig:Modal>
                            </div>
                            {% endif %}


                        </div>
                        <p class="text-gray-50">
                            {{ results.media.description }}
                        </p>
                    </div>
                </div>

                <twig:Filter results="{{ results }}" filter="{{ filter }}" />

                {% if "movies" == results.media.mediaType %}
                <div class="results"
                     {{ stimulus_controller('movie_results', {title: results.media.title, tmdbId: results.media.tmdbId, imdbId: results.media.imdbId}) }}
                     data-movie-results-loading-icon-outlet=".loading-icon"
                >
                </div>
                {% elseif "tvshows" == results.media.mediaType %}
                    <twig:TvEpisodeList
                            results="results"
                        :imdbId="results.media.imdbId" :season="results.season" :perPage="20" :pageNumber="1"
                        :tmdbId="results.media.tmdbId" :title="results.media.title" loading="defer"
                    />
                {% endif %}
            </twig:Card>
        </div>
    </div>
    <style>
        html,
        body {
            height: 100%;
        }

        @media (min-width: 640px) {
            thead tr:not(:first-child) {
                display: none;
            }
        }

        td:not(:last-child) {
            border-bottom: 0;
        }
    </style>
{% endblock %}
