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

{% block title %}
	{{ article.title }}
{% endblock %}

{% block body %}
	<header>
		<h1>{{ article.title }}</h1>
		<a href={{ path('blog') }} class="btn-link">retour à la liste des articles</a>
		{% if app.user %}
			<div class="mb-3">
				You are logged in as
				{{ app.user.userIdentifier }},
				<a href="{{ logout_path() }}">Logout</a>
			</div>
		{% endif %}
		<button type="button" class="btn" id="loginBtn" onclick="event.preventDefault(); window.location.href='{{ path('app_login') }}';">
			<img class="img-fluid" src={{ asset('image/login.png') }} alt="logo de connexion" height="30" width="30">
		</button>
	</header>
	<div class="container mt-5">
		<div class="row">
			<div
				class="col-md-8 offset-md-2">
				<!-- Article Detail -->
				<article class="mb-5">
					<h1 class="mb-3">{{ article.title }}</h1>
					<div class="card border-0 mb-4">
						<div class="card-body">
							<p class="card-text">
								<small class="text-muted">
									<strong>Par:</strong>
									{{ article.author }}
									|
									<strong>Date:</strong>
									{{ article.createdAt ? article.createdAt|date('d/m/Y H:i:s') : '' }}
								</small>
							</p>
						</div>
					</div>
					<div class="card">
						<div class="card-body">
							<p class="card-text">{{ article.content }}</p>
						</div>
					</div>
				</article>

				<!-- Comments Section -->
				<section class="mt-5">
					<h3 class="mb-4">Commentaires</h3>
					{% if pagination %}
						<div class="space-y-3">
							{% for comment in pagination %}
								<div class="card mb-3">
									<div class="card-body">
										<h5 class="card-title">{{ comment.author }}</h5>
										<p class="card-text">{{ comment.content }}</p>
										<p class="card-text">
											<small class="text-muted">
												{{ comment.createdAt ? comment.createdAt|date('d/m/Y H:i:s') : '' }}
											</small>
										</p>
									</div>
								</div>
							{% endfor %}
						</div>
					{% else %}
						<div class="alert alert-info" role="alert">
							Aucun commentaire pour le moment.
						</div>
					{% endif %}
					<div class="mt-4">
						{{ knp_pagination_render(pagination) }}
					</div>
				</section>

				<!-- Action Buttons -->
				<div class="mt-5 mb-5">
					<a href="/blog/add/{{ article.id }}" class="btn btn-primary me-2">Ajouter un commentaire</a>
					<a href="/" class="btn btn-secondary">Revenir à la liste</a>
				</div>
			</div>
		</div>
	</div>
{% endblock %}