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

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

{% block body %}
    <div class="p-4 flex flex-col grow gap-4 z-10">
        <div class="flex flex-col md: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-col md: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="grid grid-cols-2 gap-4 md:flex md:flex-row md: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="grid grid-cols-2 gap-4 md:flex flex-col md: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 %}