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

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

{% block h2 %}Media Results{% endblock %}

{% block body %}
    <div class="p-4 flex flex-col grow gap-4">
        <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-[12.5rem] rounded-lg" src="{{ results.media.poster }}" />
                    {% else %}
                        <div class="w-full md:w-[12.5rem] 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,
                                season: results.media.latestSeason,
                            })}}
                                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 mb-4">
                            {{ results.media.description }}
                        </p>

                        <div>
                            {% if results.media.stars != null %}
                                <strong>Starring</strong>: {{ results.media.stars|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.directors != null %}
                                <strong>Directors</strong>: {{ results.media.directors|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.producers != null %}
                                <strong>Producers</strong>: {{ results.media.producers|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.creators != null %}
                                <strong>Creators</strong>: {{ results.media.creators|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.genres != null %}
                                <div id="genres" class="text-gray-50 my-4">
                                    {% for genre in results.media.genres %}
                                        <small class="px-2 py-1 border border-orange-500 rounded-full">{{ genre }}</small>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        {% if results.media.mediaType == "tvshows" %}
                        <div class="flex flex-row justify-start items-end grow text-xs">
                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-orange-500 rounded-lg text-white">
                                <span>{{ results.media.numberSeasons }}</span> season(s)
                            </span>
                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title='"{{ results.media.title }}" first aired on {{ results.media.premiereDate|date(null, 'UTC') }}.'>
                                {{ results.media.premiereDate|date(null, 'UTC') }}
                            </span>
                        </div>
                        {% endif %}

                        {% if "movies" == results.media.mediaType %}
                        <div class="flex flex-row justify-start items-end grow text-xs">
                            <span class="results-count-badge py-1 px-1.5 mr-1 grow-0 font-bold text-xs bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white">
                                <span class="results-count-number" id="movie_results_count">-</span> results
                            </span>

                            <twig:Turbo:Frame id="meb_{{ results.media.imdbId }}" src="{{ path('api.library.search', {
                                title: results.media.title,
                                block: 'media_exists_badge',
                                target: "meb_" ~ results.media.imdbId
                            }) }}">
                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white" title="Movie has not been downloaded yet.">
                                    missing
                                </span>
                            </twig:Turbo:Frame>

                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title="Release date {{ results.media.episodeAirDate }}">
                                {{ results.media.premiereDate|date('n/j/Y', 'UTC') }}
                            </span>

                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white" title="This movie has a runtime of {{ results.media.runtime }} minutes.">
                                {{ results.media.runtime }} minutes
                            </span>
                        </div>
                        {% endif %}
                    </div>
                </div>

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

                {% if "movies" == results.media.mediaType %}
                <movie-container class="results"
                     {{ stimulus_controller('movie_results', {title: results.media.title, tmdbId: results.media.tmdbId, imdbId: results.media.imdbId}) }}
                >
                    <twig:Turbo:Frame id="movie_results_frame" src="{{ path('app_torrentio_movies', {
                        tmdbId: results.media.tmdbId,
                        imdbId: results.media.imdbId,
                        target: 'movie_results_frame',
                        block: 'movie_results'
                    }) }}">
                        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" title="Loading download options for {{ results.media.title }}" />
                    </twig:Turbo:Frame>
                </movie-container>
                {% elseif "tvshows" == results.media.mediaType %}
                    <twig:TvEpisodeList
                            results="results"
                            loading="defer"
                            :imdbId="results.media.imdbId"
                            :season="results.season"
                            :perPage="20"
                            :pageNumber="1"
                            :tmdbId="results.media.tmdbId"
                            :title="results.media.title"
                            :episodeNumber="results.episode"
                    />
                {% endif %}
            </twig:Card>
        </div>

        <twig:Card title="Related Media" contentClass="flex flex-col gap-4 text-white">
            <div class="grid grid-cols-2 gap-4 md:flex flex-col md:flex-row justify-between w-full">
                {% for media in results.relatedMedia %}
                    <twig:Poster imdbId="{{ media.imdbId }}"
                                 tmdbId="{{ media.tmdbId }}"
                                 title="{{ media.title }}"
                                 description="{{ media.description }}"
                                 image="{{ media.poster }}"
                                 year="{{ media.year }}"
                                 mediaType="{{ media.mediaType }}"
                    />
                {% endfor %}
            </div>
        </twig:Card>
    </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 %}