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

{#                            <div data-controller="dropdown" class="relative"#}
{#                                 {{ stimulus_controller('monitor_button', {#}
{#                                     tmdbId: results.media.tmdbId,#}
{#                                     imdbId: results.media.imdbId,#}
{#                                     title: results.media.title,#}
{#                                 })}}#}
{#                                 data-monitor-button-result-filter-outlet="#filter"#}
{#                            >#}
{#                                <button type="button" data-action="dropdown#toggle click@window->dropdown#hide"#}
{#                                        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">#}
{#                                        Monitor#}
{#                                    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">#}
{#                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4" /></svg>#}
{#                                    </svg>#}
{#                                </button>#}

{#                                <div#}
{#                                     data-dropdown-target="menu"#}
{#                                     class="hidden transition transform origin-top-right absolute right-0#}
{#                                            flex flex-col rounded-md shadow-sm w-44 bg-green-800 border-2 border-green-500 mt-1"#}
{#                                     data-transition-enter-from="opacity-0 scale-95"#}
{#                                     data-transition-enter-to="opacity-100 scale-100"#}
{#                                     data-transition-leave-from="opacity-100 scale-100"#}
{#                                     data-transition-leave-to="opacity-0 scale-95"#}
{#                                >#}
{#                                    <a href="#"#}
{#                                       data-action="dropdown#toggle"#}
{#                                       class="backdrop-filter p-2 bg-opacity-100 hover:bg-green-950 rounded-t-md"#}
{#                                    >#}
{#                                       Entire Series#}
{#                                    </a>#}
{#                                    <a href="#"#}
{#                                       data-action="dropdown#toggle"#}
{#                                       class="backdrop-filter p-2 bg-opacity-100 hover:bg-green-950 rounded-b-md"#}
{#                                    >#}
{#                                       Season#}
{#                                    </a>#}
{#                                </div>#}
{#                            </div>#}


                            <div {{ stimulus_controller('monitor_button', {
                                tmdbId: results.media.tmdbId,
                                imdbId: results.media.imdbId,
                                title: results.media.title,
                            })}}
                                data-monitor-button-result-filter-outlet="#filter"
                            >
                                <button data-monitor-button-target="button" {{ stimulus_action('monitor_button', 'toggle', 'click') }}
                                        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"
                                        type="button"
                                >
                                    Monitor
                                    <svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
                                    </svg>
                                </button>

                                <!-- Dropdown menu -->
                                <div data-monitor-button-target="options"
                                     class="absolute mt-1 right-12 z-40 hidden divide-y rounded-md shadow-sm
                                     w-44 bg-green-800 backdrop-filter bg-opacity-100 border-2 border-green-500"
                                >
                                    <ul class="py-2 text-sm text-gray-100" aria-labelledby="dropdownDefaultButton">
                                        <li {{ stimulus_action('monitor_button', 'monitorSeries', 'click') }}>
                                            <button class="px-4 py-2 hover:bg-green-950 w-full text-left">
                                                Entire Series
                                            </button>
                                        </li>
                                        <li {{ stimulus_action('monitor_button', 'monitorSeason', 'click') }}>
                                            <button class="px-4 py-2 hover:bg-green-950 w-full text-left">
                                                Season
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </div>


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