{% extends 'base.html.twig' %}

{% block title %}{{ monitor.title }} — Monitors — Torsearch{% endblock %}
{% block h2 %}Monitors{% endblock %}

{% block body %}
    <div class="px-4 py-2">
        <twig:Card title="Viewing your monitors for {{ monitor.title }}">
            <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-[12.5rem] rounded-lg" src="{{ results.media.poster }}" />
                {% else %}
                    <div class="w-full md:w-[12.5rem] 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>

                    <p class="text-gray-50 mb-4">
                        {{ results.media.description }}
                    </p>

                    <div class="text-gray-50 mb-2">
                        <div id="people" class="mb-1">
                            {% if results.media.stars != null %}
                                <strong>Starring</strong>: {{ results.media.stars|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.directors != null %}
                                <strong>Directors</strong>: {{ results.media.directors|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.producers != null %}
                                <strong>Producers</strong>: {{ results.media.producers|join(', ') }} <br />
                            {% endif %}

                            {% if results.media.creators != null %}
                                <strong>Creators</strong>: {{ results.media.creators|join(', ') }} <br />
                            {% endif %}
                        </div>

                        <div id="dates" class="mb-1">
                            {% if results.media.premiereDate %}
                                <strong>Premiered</strong>: {{ results.media.premiereDate|date('n/j/Y', 'UTC') }} <br />
                            {% endif %}
                        </div>

                        {% if results.media.genres != null %}
                            <div id="genres" class="text-gray-50 my-4">
{#                                <strong>Genres</strong>: <br />#}
                                {% for genre in results.media.genres %}
                                    <small class="px-2 py-1 border border-orange-500 rounded-full">{{ genre }}</small>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    {% if results.media.mediaType == "tvshows" %}
                        <div class="flex flex-col gap-4">
                            <div class="flex flex-col grow text-white">
                                <strong class="mb-1">In Your Library</strong>
                                <div class="flex flex-col md:flex-row  border-t-orange-500 text-xs gap-2">
                                    <div class="flex flex-col">
                                        <span class="text-sm mb-1">Seasons</span>
                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
                                                <span>{{ library.seasonCount }}</span> full
                                            </span>
                                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
                                                <span>{{ library.partialSeasonCount }}</span> partial
                                            </span>
                                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white">
                                                <span>{{ library.missingSeasonCount }}</span> missing
                                            </span>
                                        </div>
                                    </div>

                                    <div class="flex flex-col">
                                        <span class="text-sm mb-1">Episodes</span>
                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-cyan-500 rounded-lg text-white">
                                                <span>{{ library.episodeCount }}</span> existing
                                            </span>
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-cyan-500 rounded-lg text-white">
                                                <span>{{ library.missingEpisodeCount }}</span> missing
                                            </span>
                                        </div>
                                    </div>

                                    <div class="flex flex-col">
                                        <span class="text-sm mb-1">Monitors</span>
                                        <div class="flex flex-col md:flex-row border p-2 border-orange-500 rounded-lg text-xs items-center">
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
                                                <span>{{ library.monitorCount }}</span> total
                                            </span>
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
                                                <span>{{ library.activeMonitorCount }}</span> active
                                            </span>
                                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-pink-500 rounded-lg text-white">
                                                <span>{{ library.completeMonitorCount }}</span> complete
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    {% endif %}

                    {% if "movies" == results.media.mediaType %}
                        <div class="flex flex-row justify-start items-end grow text-xs">
                            <span class="results-count-badge 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">
                                <span class="results-count-number" id="movie_results_count">-</span> results
                            </span>

                            <twig:Turbo:Frame id="meb_{{ results.media.imdbId }}" src="{{ path('api.library.search', {
                                title: results.media.title,
                                block: 'media_exists_badge',
                                target: "meb_" ~ results.media.imdbId
                            }) }}">
                                <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-rose-600 rounded-lg text-white" title="Movie has not been downloaded yet.">
                                    missing
                                </span>
                            </twig:Turbo:Frame>

                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-sky-700 rounded-lg text-white" title="Release date {{ results.media.episodeAirDate }}">
                                {{ results.media.premiereDate|date('n/j/Y', 'UTC') }}
                            </span>

                            <span class="py-1 px-1.5 mr-1 grow-0 font-bold bg-orange-500 rounded-lg text-white" title="This movie has a runtime of {{ results.media.runtime }} minutes.">
                                {{ results.media.runtime }} minutes
                            </span>
                        </div>
                    {% endif %}
                </div>
            </div>

            <twig:MonitorList :parentMonitorId="monitor.id" :isWidget="false" :perPage="10"></twig:MonitorList>
        </twig:Card>
    </div>
{% endblock %}