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

{% block title %}News
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('front/css/news.css') }}"/>
{% endblock %}

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

		<div class="container h-100">
			<div class="row align-items-center h-100">
				<div class="col-lg-7">
					<div class="news-hero-content">
						<h1 class="news-hero-title">
							{{ heroTitle|default('RESTEZ CONNECTÉS À<br>L’UNIVERS D’ICHTAH')|raw }}
						</h1>

						<p class="news-hero-text">
							{{ heroText|default("Découvrez les temps forts qui rythment la vie d’ICHTAH : projets en cours, annonces officielles, partenariats et moments marquants de notre communauté artistique.") }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section class="news-grid-section">
		<div class="container">
			<div class="row g-5">
				{% for item in newsList %}
					<div class="col-lg-4 col-md-6">
						<article class="news-grid-card">
							<a href="{{ path('app_news_show', { id: item.id }) }}" class="news-grid-image-link">
								<img src="{{ item.image ? asset('front/images/news/' ~ (item.image|trim('/'))) : asset('front/images/news/news-1.png') }}" alt="{{ item.title }}" class="news-grid-image">
							</a>

							<div class="news-grid-body">
								<h3 class="news-grid-title">
									<a href="{{ path('app_news_show', { id: item.id }) }}">
										{{ item.title }}
									</a>
								</h3>

								<p class="news-grid-text">
									{% if item.content %}
										{{ item.content|striptags|slice(0, 140) ~ '...' }}
									{% else %}
										Aucun contenu disponible.
									{% endif %}
								</p>
							</div>
						</article>
					</div>
				{% else %}
					<div class="col-12">
						<p class="text-center">Aucune news disponible pour le moment.</p>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>

	<section class="upcoming-events-section">
		<div class="container">
			<div class="upcoming-events-header">
				<h2 class="upcoming-events-title">
					{{ eventTitle|default('ÉVÉNEMENTS À VENIR') }}
				</h2>
			</div>

			<div class="row g-4 justify-content-start">
				{% for item in upcomingEvents %}
					<div class="col-lg-4 col-md-6">
						<article class="upcoming-event-card">
							<a href="{{ path('app_news_show', { id: item.id }) }}" class="upcoming-event-image-link">
								<img src="{{ item.image ? asset('front/images/news/' ~ (item.image|trim('/'))) : asset('front/images/news/news-1.png') }}" alt="{{ item.title }}" class="upcoming-event-image">
							</a>

							<div class="upcoming-event-body">
								<h3 class="upcoming-event-card-title">
									<a href="{{ path('app_news_show', { id: item.id }) }}">
										{{ item.title }}
									</a>
								</h3>

								<p class="upcoming-event-text">
									{% if item.content %}
										{{ item.content|striptags|slice(0, 140) ~ '...' }}
									{% else %}
										Aucun contenu disponible.
									{% endif %}
								</p>
							</div>
						</article>
					</div>
				{% else %}
					<div class="col-12">
						<p class="text-center">Aucun événement à venir pour le moment.</p>
					</div>
				{% endfor %}
			</div>
		</div>
	</section>
{% endblock %}