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

{% block title %}
	{{ news.title }}
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('front/css/single-news.css') }}"/>
{% endblock %}
{% set imagePath = 'front/images/news/' ~ news.image|trim('/') %}


{% block body %}
	<section class="news-detail-hero" style="background-image: url('{{ asset('front/images/single-news/single-news-bg.png') }}');">
		<div class="news-detail-hero-overlay"></div>

		<div class="container h-100">
			<div class="row align-items-center h-100">
				<div class="col-lg-8">
					<div class="news-detail-hero-content">
						<h1 class="news-detail-hero-title">
							{{ news.title|raw }}
						</h1>

						<p class="news-detail-hero-text">
							{% if news.type == 'event' %}
								{{ news.content ? news.content|striptags|slice(0, 180) ~ '...' : 'Découvrez cet événement ICHTAH.' }}
							{% else %}
								{{ news.content ? news.content|striptags|slice(0, 180) ~ '...' : 'Découvrez cette actualité ICHTAH.' }}
							{% endif %}
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>


	<section class="news-detail-page">
		<div class="container">
			<div class="news-detail-content">
				<div class="news-detail-image-wrap">
					<img src="{{ asset(imagePath) }}" alt="{{ news.title }}" class="news-detail-image">
				</div>

				<div class="news-detail-body">
					{% if news.type == 'event' and news.eventDate %}
						<p>
							<strong>Date de l’événement :</strong>
							{{ news.eventDate|date('d/m/Y H:i') }}
						</p>
					{% elseif news.publishedAt %}
						<p>
							<strong>Date de publication :</strong>
							{{ news.publishedAt|date('d/m/Y') }}
						</p>
					{% endif %}

					{% if news.content %}
						{{ news.content|raw }}
					{% else %}
						<p>Aucun contenu disponible.</p>
					{% endif %}
				</div>
			</div>
		</div>
	</section>
{% endblock %}