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

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

{% block body %}
	<div class="w-full mx-auto mt-10">
		<div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg p-6">
			<div class="text-center">
				{% if studio.logo %}
					<img src="{{ asset('uploads/studios/' ~ studio.logo) }}" alt="{{ studio.name }}" class="mx-auto h-fit object-contain">
				{% else %}
					<div class="h-32 flex items-center justify-center bg-gray-200 text-gray-500">
						Aucun logo
					</div>
				{% endif %}
			</div>

			<h1 class="text-2xl font-semibold text-center mt-4">{{ studio.name }}</h1>

			<div class="mt-4 flex justify-center space-x-4">
				<a href="{{ path('app_studios_index') }}" class="text-gray-600 hover:text-gray-800">
					Retour à la liste
				</a>
				<a href="{{ path('app_studios_edit', {'id': studio.id}) }}" class="text-yellow-600 hover:text-yellow-800">
					Modifier
				</a>
			</div>
		</div>

		<!-- Liste des vidéos du studio -->
		<div class="mt-10 mx-10">
			<h2 class="text-xl font-semibold mb-4 text-gray-300">Vidéos du studio - {{ allVideos|length }} vidéo{{ allVideos|length > 1 ? 's' : '' }}</h2>

			<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
				{% for video in allVideos %}
					<div class="bg-gray-100 shadow-md rounded-lg overflow-hidden">
						<img src="{{ asset('uploads/videos/' ~ video.picture) }}" alt="Vidéo {{ video.name }}" class="aspect-video w-full object-cover">
						<div class="p-2">
							<h3 class="text-lg font-semibold">{{ video.name}}</h3>
							<div class="text-sm text-gray-500 flex">
								<strong class="mr-1">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 %}
                                    <p class="mr-1">, </p>
                                    {% endif %}
                                {% endfor %}
							</div>
                            <div class="text-sm text-gray-500 flex">
								<strong class="mr-1">Tags :</strong>
                                {% for tag in video.tags %}
                                    <p class="text-blue-600 hover:underline">{{ tag.name }}</p>
                                    {% if not loop.last %}
                                    <p class="mr-1">, </p>
                                    {% endif %}
                                {% endfor %}
							</div>
							<div class="flex gap-2">
								<div class="text-sm text-gray-500 flex gap-1">
									<strong>Sortie le :</strong>
									<p>{{ video.createdAt|format_datetime(locale='fr',pattern='d MMMM Y') }}</p>
								</div>
								<div class="text-sm text-gray-500 flex gap-1">
									<strong>Durée :</strong>
									<p>{{ video.duration }}</p>
								</div>
							</div>
                            <div>
                                <p>{{ video.story|slice(0, 55) }}...</p>
                            </div>
							<div class="flex justify-end p-2">
								<a href="{{ path('app_videos_show', {'id': video.id}) }}" class="text-blue-600 hover:underline">Voir</a>
							</div>
						</div>
					</div>
                {% else %}
                    <p class="col-span-4 text-center text-gray-400 text-bold">Aucune vidéo trouvée.</p>
				{% endfor %}
			</div>
		</div>
	</div>
{% endblock %}