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

{% block title %}Vidéos
{% endblock %}

{% block body %}
	<div class="container mx-auto p-6">
		<div class="flex justify-between items-center mb-3 md:mb-6">
			{% include "partials/dropdowns_menu.html.twig" %}
			<h1 class="text-2xl font-semibold text-gray-300 hidden md:block">Vidéos -
				{{ videos|length }}</h1>
			<a href="{{ path('app_videos_new') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
				Ajouter une vidéo
			</a>
		</div>

		<h1 class="text-2xl font-semibold text-gray-300 text-center md:hidden mb-3">Vidéos -
			{{ videos|length }}</h1>

		<!-- Liste des vidéos -->
		<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
			{% for video in videos %}
				<div class="bg-white shadow-lg rounded-lg overflow-hidden relative">
					<div class="absolute top-0 right-0 px-2 py-1 rounded-bl-lg bg-gray-100 max-w-1/4">
						<img src="{{ asset('uploads/studios/' ~ video.studio.logo) }}" alt="{{ video.studio.name }}" class="object-contain">
					</div>
					<div class="aspect-video flex justify-center items-center bg-gray-200">
						{% if video.picture %}
							<img src="{{ asset('uploads/videos/' ~ video.picture) }}" alt="{{ video.name }}" class="object-contain">
						{% else %}
							<span class="text-gray-500">Pas d'image</span>
						{% endif %}
					</div>
					<div class="p-4 text-center">
						<h2 class="text-lg font-semibold">{{ video.name }}</h2>
						<div class="flex justify-center gap-2">
							<span>{{ video.createdAt ? video.createdAt|date('d/m/Y') : 'Annee inconnue' }}</span>
							<span>-</span>
							<span>{{ video.duration ? video.duration : 'Durée inconnue' }}</span>
						</div>
						<div class="my-2">
							<div class="text-sm text-gray-500">
								<strong>Acteurs :</strong>
								{% for actor in video.actors %}
									<a href="{{ path('app_actors_show', {'id': actor.id}) }}" class="text-blue-600 hover:underline">{{ actor.name }}</a>
									{% if not loop.last %},
									{% endif %}
								{% endfor %}
							</div>
							<div class="text-sm text-gray-500">
								<strong>Tags :</strong>
								{% for tag in video.tags %}
									<span class="text-blue-600 hover:underline">{{ tag.name }}</span>
									{% if not loop.last %},
									{% endif %}
								{% endfor %}
							</div>
						</div>
						<div>{{ video.story|slice(0, 100) }}...</div>
						<div class="mt-3 flex justify-center space-x-4">
							<a href="{{ path('app_videos_show', {'id': video.id}) }}" class="text-blue-600 hover:underline">Voir</a>
							<a href="{{ path('app_videos_edit', {'id': video.id}) }}" class="text-yellow-600 hover:underline">Modifier</a>
							{{ include('videos/_delete_form.html.twig') }}
						</div>

					</div>
				</div>
			{% else %}
				<p class="col-span-3 text-center text-gray-500">Aucune vidéo trouvée.</p>
			{% endfor %}
		</div>

	</div>
{% endblock %}