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

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

{% block body %}
    <div class="p-4 flex flex-col grow gap-4">
        <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">
                <table class="divide-y divide-gray-200 dark:divide-gray-50 dark:bg-gray-50 table-fixed">
                    <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">
                    {% if active_downloads|length > 0 %}
                        {% for download in active_downloads %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                                {{ download.title }}
                            </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="w-4 inline-block text-center text-gray-50">{{ download.progress }}</span>
                                    </span>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
                                No active downloads
                            </td>
                        </tr>
                    {% endif %}
                    </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 table-fixed">
                    <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-gray-500 uppercase dark:text-stone-800">
                            Status
                        </th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 dark:divide-gray-50">
                    {% if recent_downloads|length > 0 %}
                        {% for download in recent_downloads %}
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-stone-800">
                                    {{ download.title }}
                                </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>
                        {% endfor %}
                        <tr class="bg-blue-400">
                            <td class="px-6 py-3 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-rose-400 dark:text-stone-800" colspan="2">
                                <a href="#">View all downloads</a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap text-xs uppercase text-center col-span-2 font-medium text-gray-800 dark:text-stone-800" colspan="2">
                                No recent downloads
                            </td>
                        </tr>
                    {% endif %}
                    </tbody>
                </table>
            </twig:Card>
        </div>
        <div class="">
            <twig:Card title="Popular Movies" contentClass="flex flex-row justify-between w-full">
                {% for movie in popular_movies %}
                    <twig:Poster imdbId="" title="{{ movie.title }}" description="{{ movie.description }}" image="{{ movie.poster }}" year="{{ movie.year }}" />
                {% endfor %}
            </twig:Card>
        </div>
    </div>
{% endblock %}