{% 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-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.episodeAirDate|date('Y') }})
                            </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 }}
                            <br /><br />

                            {% 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 %}
                        </p>

                        {% if "movies" == results.media.mediaType %}
                        <div class="flex flex-row justify-start items-end grow">
                            <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
                            }) }}">
                                <small 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
                                </small>
                            </twig:Turbo:Frame>

                            <small 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.episodeAirDate|date(null, 'UTC') }}
                            </small>

                            <small 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
                            </small>
                        </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}) }}
                     data-movie-results-loading-icon-outlet=".loading-icon"
                >
                    <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'
                    }) }}" />
                </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">
            <p>Results similar to "{{ results.media.title }}" that you may be interested in.</p>

            <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 %}