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

{% block title %}Dashboard — Torsearch{% endblock %}

{% block body %}
    <div class="p-4 flex flex-col grow gap-4 z-30">
        <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
        <div class="flex flex-row gap-4">
            <twig:Card title="Active Downloads" class="w-full">
                <twig:DownloadList :type="'active'" />
            </twig:Card>

            <twig:Card title="Recent Downloads" class="w-full">
                <twig:DownloadList :type="'complete'" />
            </twig:Card>
        </div>
        <div class="flex flex-row gap-4">
            <twig:Card title="Monitors" class="w-full">
                <twig:MonitorList :type="'active'" :isWidget="true" />
            </twig:Card>
        </div>
        <div class="flex flex-col gap-4">
            <twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
                {% for movie in popular_movies %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
                                 title="{{ movie.title }}"
                                 description="{{ movie.description }}"
                                 image="{{ movie.poster }}"
                                 year="{{ movie.year }}"
                                 mediaType="movies"
                    />
                {% endfor %}
            </twig:Card>
            <twig:Card title="Popular TV Shows" contentClass="flex flex-row justify-between w-full">
                {% for movie in popular_tvshows %}
                    <twig:Poster imdbId="{{ movie.imdbId }}"
                                 tmdbId="{{ movie.tmdbId }}"
                                 title="{{ movie.title }}"
                                 description="{{ movie.description }}"
                                 image="{{ movie.poster }}"
                                 year="{{ movie.year }}"
                                mediaType="tvshows"
                    />
                {% endfor %}
            </twig:Card>
        </div>
    </div>
{% endblock %}