Files
torsearch/templates/search/result.html.twig

131 lines
7.9 KiB
Twig

{% 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">
{% if results.media.poster != null %}
<img class="w-40 rounded-lg" src="{{ results.media.poster }}" />
{% else %}
<div class="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>
{% endblock %}