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

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

{% block body %}
	<div class="w-full mx-auto mt-10">
		<div class="max-w-xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden flex flex-col md:flex-row">
			<div class="md:w-1/2 flex justify-center items-center">
				{% if actor.photo %}
					<img src="{{ asset('uploads/actors/' ~ actor.photo) }}" alt="{{ actor.name }}" class="object-cover h-full">
				{% else %}
					<img src="{{ asset('images/no-image-actor.jpg') }}" alt="{{ actor.name }}" class="object-cover h-full">
				{% endif %}
			</div>

			<!-- Partie Texte -->
			<div class="p-4 flex flex-col md:w-1/2">
				<h2 class="text-lg font-semibold text-center">{{ actor.name }}</h2>

				<hr class="my-2 border-gray-300 w-full">

				<div class="flex-1">
					<ul>
						<li>
							<strong>Age :</strong>
							<span>{{ actor.birthday ? ('now'|date('Y') - actor.birthday|date('Y')) ~ ' ans' : 'Age inconnu'}}</span>
						</li>
						<li>
							<strong>Origine :</strong>
							<span>{{ actor.origin }}</span>
						</li>
						<li>
							<strong>Taille :</strong>
							<span>{{ actor.size ? (actor.size / 100) ~ ' m' : 'Taille inconnue' }}</span>
						</li>
						<li>
							<strong>Cheveux :</strong>
							<span>{{ actor.colorHair }}</span>
						</li>
						<li>
							<strong>Tatouages :</strong>
							<span>{{ actor.tattoo ? 'Oui' : 'Non' }}</span>
						</li>
						<li>
							<strong>Piercings :</strong>
							<span>{{ actor.piercing ? 'Oui' : 'Non' }}</span>
						</li>
						<li>
							<strong>Position :</strong>
							<span>{{ actor.role }}</span>
						</li>
						<li>
							<strong>Taille de la bite :</strong>
							<span>{{ actor.dick ? actor.dick  ~ ' cm' : 'Taille inconnue' }}</span>
						</li>
						<li>
							<strong>Circoncis :</strong>
							<span>{{ actor.circumcised ? 'Oui' : 'Non' }}</span>
						</li>
					</ul>
				</div>

				<hr class="my-2 border-gray-300 w-full">

				<div class="mt-4 flex justify-center space-x-4">
					<a href="{{ path('app_actors_index') }}" class="text-gray-600 hover:text-gray-800">
						Retour à la liste
					</a>
					<a href="{{ path('app_actors_edit', {'id': actor.id}) }}" class="text-yellow-600 hover:text-yellow-800">
						Modifier
					</a>
				</div>
			</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 avec {{ actor.name }} - {{ 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 %}