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