<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">
        {% if this.getEpisodes().items != null %}
        {% for episode in this.getEpisodes().items %}
            <episode-container id="{{ episode_anchor(episode.seasonNumber, episode.episodeNumber) }}" class="results"
                 show-title="{{ this.title }}"
                 data-download-button-outlet=".download-btn"
                    {{ stimulus_controller('tv_results', {
                        title: this.title,
                        tmdbId: this.tmdbId,
                        imdbId: this.imdbId,
                        season: episode.seasonNumber,
                        episode: episode.episodeNumber,
                        active: 'true',
                    }) }}
            >
                    <div class="p-4 md:p-6 flex flex-col gap-6 bg-orange-500/60 bg-clip-padding backdrop-filter backdrop-blur-md rounded-md">
                        <div class="flex flex-col md:flex-row gap-4">
                            {% if "jpg" in episode.poster %}
                                <img class="w-full md:w-64 rounded-lg" src="{{ episode.poster }}" />
                            {% else %}
                                <div class="w-full md: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.episodeNumber }}. {{ episode.name }}
                                </h4>
                                <p>{{ episode.description|truncate }}</p>
                                <div class="text-xs font-bold">
                                    <button class="results-count-badge py-1 px-1.5 mr-1 grow-0 bg-green-600 rounded-lg hover:cursor-pointer hover:bg-green-700 text-white" title="Click to expand the results table for season {{ episode.seasonNumber }} episode {{ episode.episodeNumber }}.">
                                        <span class="results-count-number" {{ stimulus_target('tv-results', 'count') }}></span> results
                                    </button>

                                    <span class="py-1 px-1.5 mr-1 grow-0 bg-gray-700 rounded-lg text-white" title='"{{ episode.name }}" aired on {{ episode.airDate|date(null, 'UTC') }}.'>
                                        {{ episode.airDate|date(null, 'UTC') }}
                                    </span>

                                    <twig:Turbo:Frame id="meb_{{ this.imdbId }}_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('api.library.search', {
                                        title: this.title,
                                        season: episode.seasonNumber,
                                        episode: episode.episodeNumber,
                                        block: 'media_exists_badge',
                                        target: "meb_" ~ this.imdbId ~"_" ~ episode_id(episode.seasonNumber, episode.episodeNumber)
                                    }) }}">
                                        <span class="py-1 px-1.5 mr-1 grow-0 bg-rose-600 rounded-lg text-white" title="Episode has not been downloaded yet.">
                                            missing
                                        </span>
                                    </twig:Turbo:Frame>
                                </div>
                            </div>
                            <div class="flex flex-col gap-4 justify-between">
                                <download-media-button
                                        class="px-2 py-2 bg-green-500 bg-opacity-80 font-medium text-center rounded-lg text-sm cursor-pointer items-center self-end"
                                        title="Download season {{ episode.seasonNumber }} episode {{ episode.episodeNumber }} of {{ this.title }}"
                                        media-type="tvshows"
                                        imdb-id="{{ this.imdbId }}"
                                        season="{{ episode.seasonNumber }}"
                                        episode="{{ episode.episodeNumber }}"
                                >
                                    <twig:ux:icon name="bi:download" width="20" />
                                </download-media-button>

                                <input class="episode-selector" type="checkbox"
                                        {{ stimulus_target('tv-results', 'episodeSelector') }}
                                />

                                <button class="dropdown-button flex flex-col items-end transition-transform duration-300 ease-in-out rotate-90" title="Click to expand the results table for season {{ episode.seasonNumber }} episode {{ episode.episodeNumber }}.">
                                    <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 class="results-container inline-block overflow-hidden rounded-lg hidden">
                            <twig:Turbo:Frame loading="lazy" id="results_{{ episode_id(episode.seasonNumber, episode.episodeNumber) }}" src="{{ path('app_torrentio_tvshows', {
                                tmdbId: this.tmdbId,
                                imdbId: this.imdbId,
                                season: episode.seasonNumber,
                                episode: episode.episodeNumber,
                                target: 'results_' ~ episode_id(episode.seasonNumber, episode.episodeNumber),
                                block: 'tvshow_results'
                            }) }}">
                                <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
                            </twig:Turbo:Frame>
                        </div>
                    </div>
            </episode-container>
        {% endfor %}
        {% endif %}
    </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 %}
