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

{% block title %}Tableau de bord
{% endblock %}

{% block body %}
	<div class="flex h-full md:h-screen">
		<div class="w-1/2 h-full max-sm:hidden">
			<img src="{{asset('images/index.jpg')}}" alt="Image aléatoire" class="w-full h-full object-cover">
		</div>

		<!-- Bouton de déconnexion en haut à droite -->
		<div class="fixed top-0 right-0 p-4">
			<a href="{{ path('app_logout') }}" class="flex items-center justify-center bg-red-500 hover:bg-red-700 text-white rounded-full p-1">
				{{ ux_icon('uiw:logout', { class: 'w-6 h-6' }) }}
			</a>
		</div>

		<!-- Partie droite avec le menu -->
		<div class="w-full md:w-1/2 bg-gray-800 p-5 md:p-10 flex flex-col justify-center">
			<h1 class="text-xl md:text-3xl font-bold mb-4 md:mb-8 text-gray-100 text-center md:text-left">Tableau de bord</h1>

			<!-- Menu avec les trois cartes -->
			<div class="grid grid-cols-4 gap-4 mb-5 md:mb-10">
				<a href="{{path('app_studios_index')}}" class="bg-gray-600 border-2 border-gray-200 p-3 md:p-6 shadow-lg rounded-lg text-center hover:bg-gray-400 transition">
					<h2 class="text-xl font-semibold flex flex-col md:flex-row gap-0 md:gap-2 justify-center items-center">
						{{ ux_icon('game-icons:clapperboard', {class: "w-8 h-8"}) }}
						Studios
					</h2>
				</a>
				<a href="{{path('app_actors_index')}}" class="bg-gray-600 border-2 border-gray-200 p-3 md:p-6 shadow-lg rounded-lg text-center hover:bg-gray-400 transition">
					<h2 class="text-xl font-semibold flex flex-col md:flex-row gap-0 md:gap-2 justify-center items-center">
						{{ ux_icon('mdi:men', {class: "w-8 h-8"}) }}
						Acteurs
					</h2>
				</a>
				<a href="{{path('app_videos_index')}}" class="bg-gray-600 border-2 border-gray-200 p-3 md:p-6 shadow-lg rounded-lg text-center hover:bg-gray-400 transition">
					<h2 class="text-xl font-semibold flex flex-col md:flex-row gap-0 md:gap-2 justify-center items-center">
						{{ ux_icon('akar-icons:video', {class: "w-8 h-8"}) }}
						Vidéos
					</h2>
				</a>
				<a href="{{ path('app_home_settings') }}" class="bg-gray-600 border-2 border-gray-200 p-3 md:p-6 shadow-lg rounded-lg text-center hover:bg-gray-400 transition">
					<h2 class="text-xl font-semibold flex flex-col md:flex-row gap-0 md:gap-2 justify-center items-center">
						{{ ux_icon('lsicon:setting-filled', {class: "w-8 h-8"}) }}
						Paramètres
					</h2>
				</a>
			</div>

			<!-- Liste des dernières vidéos -->
			<h2 class="text-2xl font-semibold mb-4 text-gray-100">Dernières vidéos</h2>
			<ul class="space-y-3">
				{% for video in lastFiveVideos %}
					<li class="bg-gray-600 p-2 shadow rounded-lg flex items-center">
						<img src="{{ asset('uploads/videos/' ~ video.picture) }}" alt="Vidéo {{ video.name }}" class="aspect-video h-20 rounded-lg mr-4">
						<div>
							<h3 class="text-lg font-semibold text-gray-200">{{video.name}} - {{ video.duration }}</h3>
							<h4 class="text-gray-100">
								<a href="{{ path('app_studios_show', {'id': video.studio.id}) }}" class="hover:underline">{{video.studio.name}}</a>
								-
								{% for actor in video.actors %}
									<a href="{{ path('app_actors_show', {'id': actor.id}) }}" class="hover:underline">{{ actor.name }}</a>
									{% if not loop.last %}{% if loop.length == 2 %} et {% elseif loop.index == loop.length - 1 %}, et {% else %}, {% endif %}{% endif %}
								{% endfor %}
							</h4>
							<p class="text-sm text-gray-400">Ajoutée le
								{{ video.createdAt|format_datetime(locale='fr',pattern='d MMMM Y') }}</p>
						</div>
					</li>
				{% endfor %}
			</ul>
		</div>
	</div>
{% endblock %}