81 lines
4.4 KiB
Twig
81 lines
4.4 KiB
Twig
<div{{ attributes.defaults(stimulus_controller('tv_episode_list')) }}
|
|
class="episode-list flex flex-col gap-4"
|
|
>
|
|
<div data-live-id="{{ uniqid() }}" class="episode-container flex flex-col gap-4">
|
|
{% for episode in this.episodes.items %}
|
|
<div id="episode_{{ episode['season_number'] }}_{{ episode['episode_number'] }}" class="results"
|
|
data-tv-results-loading-icon-outlet=".loading-icon"
|
|
data-download-button-outlet=".download-btn"
|
|
{{ stimulus_controller('tv_results', {
|
|
title: this.title,
|
|
tmdbId: this.tmdbId,
|
|
imdbId: this.imdbId,
|
|
season: episode['season_number'],
|
|
episode: episode['episode_number'],
|
|
active: 'true',
|
|
}) }}
|
|
>
|
|
<div class="p-6 flex flex-col gap-6 bg-orange-500 bg-clip-padding backdrop-filter backdrop-blur-md bg-opacity-60 rounded-md">
|
|
<div class="flex flex-row gap-4">
|
|
{% if episode['poster'] != null %}
|
|
<img class="w-64 rounded-lg" src="{{ episode['poster'] }}" />
|
|
{% else %}
|
|
<div class="w-64 min-w-64 sticky h-[144px] rounded-lg bg-gray-700 flex items-center justify-center">
|
|
<twig:ux:icon width="32" name="hugeicons:loading-01" />
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex flex-col gap-4 grow">
|
|
<h4 class="text-md font-bold">
|
|
{{ episode['episode_number'] }}. {{ episode['name'] }}
|
|
</h4>
|
|
<p>{{ episode['overview']|truncate }}</p>
|
|
<div>
|
|
<button class="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"
|
|
{{ stimulus_action('tv-results', 'toggleList', 'click') }}
|
|
>
|
|
<span {{ stimulus_target('tv-results', 'count') }}>-</span> results
|
|
</button>
|
|
|
|
<small class="py-1 px-1.5 mr-1 grow-0 font-bold bg-gray-700 rounded-lg font-normal text-white" title="Air date {{ episode['name'] }}">
|
|
{{ episode['air_date']|date }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-4 justify-between">
|
|
<div class="flex flex-col items-center">
|
|
<input type="checkbox"
|
|
{{ stimulus_target('tv-results', 'episodeSelector') }}
|
|
/>
|
|
</div>
|
|
<button class="flex flex-col items-end transition-transform duration-300 ease-in-out rotate-90"
|
|
{{ stimulus_target('tv-results', 'toggleButton') }}
|
|
{{ stimulus_action('tv-results', 'toggleList', 'click') }}>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32">
|
|
<path
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M20 6L10 16l10 10" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div {{ stimulus_target('tv-results', 'listContainer') }} class="inline-block overflow-hidden rounded-lg">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% set paginator = this.episodes %}
|
|
{% include 'partial/tv-episode-list-paginator.html.twig' %}
|
|
</div>
|
|
|
|
{% macro placeholder(props) %}
|
|
<span>
|
|
<twig:ux:icon name="codex:loader" height="40" width="40" data-loading-icon-target="icon" class="text-end" />
|
|
</span>
|
|
{% endmacro %}
|