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

{% block head %}
	{{ parent() }}
	<style>
		.omaha-container {
			background-color: #f8f9fa;
			border-radius: 10px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			padding: 2rem;
		}

		.omaha-title {
			color: rgb(0, 3, 8);
			font-weight: 700;
			text-align: center;
			margin-bottom: 0.5rem;
			font-size: 2.5rem;
		}

		.omaha-subtitle {
			color: #6c757d;
			text-align: center;
			margin-bottom: 2rem;
			font-size: 1.8rem;
			font-weight: 600;
		}

		.omaha-info-card {
			border-radius: 8px;
			padding: 1.5rem;
		}

		.omaha-info-row {
			margin-bottom: 0.8rem;
			display: flex;
			align-items: center;
		}

		.omaha-info-label {
			font-weight: 600;
			color: #495057;
		}

		.omaha-info-value {
			margin-left: 0.5rem;
			color: #212529;
		}

		.omaha-card-image {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.omaha-card-image img {
			max-height: 300px;
			object-fit: contain;
			border-radius: 8px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
		}

		.omaha-card-header {
			font-weight: 600;
			padding: 1rem;
		}

		.omaha-list-item {
			padding: 0.8rem 1rem;
			border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		}

		.omaha-list-item:last-child {
			border-bottom: none;
		}

		.omaha-emergency {
			background-color: #dc3545;
		}

		.omaha-schedule {
			background-color: rgb(5, 126, 19);
		}

		@media(max-width: 768px) {
			.omaha-title {
				font-size: 2rem;
			}

			.omaha-subtitle {
				font-size: 1.5rem;
			}
		}
	</style>
{% endblock %}

{% block header %}
	{{ parent() }}
{% endblock %}

{% block body %}
	<div class="container py-5">
		<div class="omaha-container">
			<div class="text-center mb-4">
				<h1 class="omaha-title">{{ event.titre }}</h1>
			</div>

			<div class="card mb-4">
				<div class="card-body p-4">
					<div class="row">
						<div class="col-lg-5">
							<h3 class="card-title mb-4 text-primary">event.eventUser.role</h3>
							<div class="omaha-info-card">
								<div class="omaha-info-row">
									<span class="omaha-info-label">Prénom :</span>
									<span class="omaha-info-value">{{ event.eventUser.user.prenom }}</span>
								</div>
								<div class="omaha-info-row">
									<span class="omaha-info-label">Nom :</span>
									<span class="omaha-info-value">{{ event.eventUser.user.nom }}</span>
								</div>
								<div class="omaha-info-row">
									<span class="omaha-info-label">Téléphone :</span>
									<span class="omaha-info-value">{{ event.eventUser.user.telephone }}</span>
								</div>
								<div class="omaha-info-row">
									<span class="omaha-info-label">Email :</span>
									<span class="omaha-info-value">{{ event.eventUser.user.mail }}</span>
								</div>
								<div class="omaha-info-row">
									<span class="omaha-info-label">Qualité :</span>
									<span class="omaha-info-value">{{ event.eventUser.commentaire }}</span>
								</div>
							</div>
						</div>
						<div class="col-lg-7 omaha-card-image mt-4 mt-lg-0">
							<img src="{{ asset('other/images/' ~ user.prenom ~ ' ' ~ user.nom ~ '.png') }}" alt="Omaha Beach Trail" class="img-fluid">
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6 mb-4">
					<div class="card h-100">
						<div class="card-header omaha-card-header omaha-schedule text-white">
							<h4 class="mb-0">
								<i class="fas fa-clock me-2"></i>Horaires importants
							</h4>
						</div>
						<div class="card-body p-0">
							<ul class="list-group list-group-flush">
								<li class="list-group-item omaha-list-item">
									<strong>Heure d'arrivée position :</strong>
									<span class="ms-2">{{ event.eventUser.heureArrivee|date('H:i') }}</span>
								</li>
								<li class="list-group-item omaha-list-item">
									<strong>Heure de départ position :</strong>
									<span class="ms-2">{{ event.eventUser.heureDepart|date('H:i') }}</span>
								</li>
								<li class="list-group-item omaha-list-item">
									<strong>Lien de la carte en ligne :</strong>
									<a href="https://www.openrunner.com/route-details/11493123" target="_blank" class="ms-2 btn btn-sm btn-outline-primary">
										<i class="fas fa-map-marker-alt me-1"></i>Voir la carte
									</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-md-6 mb-4">
					<div class="card h-100">
						<div class="card-header omaha-card-header omaha-emergency text-white">
							<h4 class="mb-0">
								<i class="fas fa-exclamation-triangle me-2"></i>Contacts d'urgence
							</h4>
						</div>
						<div class="card-body p-0">
							<ul class="list-group list-group-flush">
								<li class="list-group-item omaha-list-item">
									<strong>Poste de secours :</strong>
									<span class="ms-2">06 07 30 90 88</span>
								</li>
								<li class="list-group-item omaha-list-item">
									<strong>Secours :</strong>
									<span class="ms-2">15</span>
								</li>
								<li class="list-group-item omaha-list-item">
									<strong>Laurent :</strong>
									<span class="ms-2">06 42 57 14 18</span>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block footer %}
	{{ parent() }}
{% endblock %}