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

{% block title %}
	{{ video.name }}
{% endblock %}

{% block body %}
	<div class="max-w-5xl mx-auto mt-5 p-6 bg-white shadow-md rounded-xl space-y-6">

		<div class="flex flex-col sm:flex-row gap-6">
			<div class="w-full sm:w-1/2">
				{% if video.picture %}
					<img src="{{ asset('uploads/videos/' ~ video.picture) }}" alt="{{ video.name }}" class="w-full h-auto rounded-lg">
				{% else %}
					<div class="bg-gray-200 w-full h-64 flex items-center justify-center text-gray-500">
						Pas de miniature
					</div>
				{% endif %}
			</div>

			<div class="w-full sm:w-1/2 flex flex-col justify-between">
				<div>
					<h1 class="text-2xl font-bold mb-2">{{ video.name }}</h1>

					<p class="text-sm text-gray-600 mb-1">
						<strong>Durée :</strong>
						{{ video.duration }}
					</p>

					<p class="text-sm text-gray-600 mb-1">
						<strong>Studio :</strong>
						{% if video.studio %}
							<a href="{{ path('app_studios_show', {'id': video.studio.id}) }}" class="text-blue-600 hover:underline">{{ video.studio.name }}</a>
						{% else %}
							Inconnu
						{% endif %}
					</p>

					<p class="text-sm text-gray-600 mb-1">
						<strong>Date de sortie :</strong>
						{{ video.createdAt ? video.createdAt|date('d/m/Y') : 'Inconnue' }}
					</p>
				</div>

				<div>
					<h3 class="mt-4 text-sm font-semibold text-gray-700">Tags</h3>
					<div class="flex flex-wrap gap-2 mt-1">
						{% for tag in video.tags %}
							<span class="bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded">
								{{ tag.name }}
							</span>
						{% else %}
							<span class="text-gray-400 text-xs">Aucun tag</span>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>

		<div>
			<h3 class="text-lg font-semibold mb-2">Description</h3>
			<p class="text-gray-700 whitespace-pre-line">
				{{ video.story|default('Aucune description disponible.') }}
			</p>
		</div>

		<div>
			<h3 class="text-lg font-semibold mb-2">Acteurs</h3>
			<div class="flex flex-wrap gap-4">
				{% for actor in video.actors %}
					<div class="w-24 text-center">
						<div class="w-24 h-24 bg-gray-100 rounded-full overflow-hidden mx-auto">
							{% if actor.photo %}
								<img src="{{ asset('uploads/actors/' ~ actor.photo) }}" class="w-full object-cover" alt="{{ actor.name }}">
							{% else %}
								<span class="text-sm text-gray-500 flex items-center justify-center h-full">No photo</span>
							{% endif %}
						</div>
						<div class="mt-2 text-sm">
							<a href="{{ path('app_actors_show', {'id': actor.id}) }}" class="text-blue-600 hover:underline">{{ actor.name }}</a>
						</div>
					</div>
				{% else %}
					<p class="text-gray-500 text-sm">Aucun acteur renseigné.</p>
				{% endfor %}
			</div>
		</div>

		<div class="flex justify-between pt-6 border-t">
			<a href="{{ path('app_videos_index') }}" class="text-blue-600 hover:underline">← Retour à la liste</a>
			<div class="flex gap-4">
				<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>
{% endblock %}