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

{% block title %}Dashboard &mdash - Torsearch{% endblock %}

{% block body %}
    <div class="p-4 flex flex-col grow gap-2">
        <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
        <div class="flex flex-row gap-2">
            <twig:Card title="Active Downloads" class="w-full">
                <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50">
                    <thead>
                    <tr class="dark:bg-gray-50">
                        <th scope="col"
                            class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800">
                            Title
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase dark:text-stone-800">
                            Progress
                        </th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            The Wolf of Wallstreet
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1.5 bg-purple-600 rounded-full">
                                    <span class="text-gray-50">11</span>
                                </span>
                        </td>
                    </tr>

                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            Inception
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1.5 bg-purple-600 rounded-full">
                                    <span class="text-gray-50">36</span>
                                </span>
                        </td>
                    </tr>

                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            Hop
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1.5 bg-purple-600 rounded-full">
                                    <span class="text-gray-50">0</span>
                                </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </twig:Card>

            <twig:Card title="Recent Downloads" class="w-full">
                <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50">
                    <thead>
                    <tr class="dark:bg-gray-50">
                        <th scope="col"
                            class="px-6 py-3 text-start text-xs font-medium text-stone-500 uppercase dark:text-stone-800 rounded-tl-md">
                            Title
                        </th>
                        <th scope="col"
                            class="px-6 py-3 text-start text-xs font-medium text-end text-gray-500 uppercase dark:text-stone-800">
                            Status
                        </th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            The Family Plan
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1 bg-green-600 rounded-lg">
                                    <span class="text-gray-50">Complete</span>
                                </span>
                        </td>
                    </tr>

                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            It
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1 bg-green-600 rounded-lg">
                                    <span class="text-gray-50">Complete</span>
                                </span>
                        </td>
                    </tr>

                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                            Silicon Cowboys
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-end text-gray-800 dark:text-gray-50">
                                <span class="p-1 bg-green-600 rounded-lg">
                                    <span class="text-gray-50">Complete</span>
                                </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </twig:Card>
        </div>
        <div class="">
            <twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
                <twig:Poster imdbId="" title="A Working Man" description="" image="https://image.tmdb.org/t/p/w500/xUkUZ8eOnrOnnJAfusZUqKYZiDu.jpg" year="" />
                <twig:Poster imdbId="" title="In the Lost Lands" description="" image="https://image.tmdb.org/t/p/w500/iHf6bXPghWB6gT8kFkL1zo00x6X.jpg" year="" />
                <twig:Poster imdbId="" title="A Minecraft Movie" description="" image="https://image.tmdb.org/t/p/w500/yFHHfHcUgGAxziP1C3lLt0q2T4s.jpg" year="" />
                <twig:Poster imdbId="" title="G20" description="" image="https://image.tmdb.org/t/p/w500/wv6oWAleCJZUk5htrGg413t3GCy.jpg" year="" />
                <twig:Poster imdbId="" title="Novocaine" description="" image="https://image.tmdb.org/t/p/w500/xmMHGz9dVRaMY6rRAlEX4W0Wdhm.jpg" year="" />
                <twig:Poster imdbId="" title="Gunslingers" description="" image="https://image.tmdb.org/t/p/w500/O7REXWPANWXvX2jhQydHjAq2DV.jpg" year="" />
            </twig:Card>
        </div>
    </div>
{% endblock %}