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

{% block title %}Test article
{% endblock %}

{% block body %}
	<div class="article-view">
		<div class="article-hero">
			<img src="/images/placeholder/placeholder_cover.png" alt="Cover of the article">
		</div>
		<div class="container grid">
			<div class="article-meta">
				{% include 'article/components/_preview_breadcrumb.html.twig' %}
				<h1 itemprop="headline">Chargement...</h1>
				<div class="meta">
					<p>Publié le
						<time itemprop="datePublished" datetime="2023-06-09">29 Juin 2022</time>, Durée de lecture: 3min
					</p>
					{% include 'base/_share.html.twig' %}
				</div>
				<article class="content mt16" itemscope itemtype="https://schema.org/BlogPosting">
					<p itemprop="description">Chargement...</p>
				</article>
			</div>
			<div class="article-main">
				<div class="container flex centered">
					{% include 'base/_share.html.twig' %}
				</div>
			</div>
			<aside>
				<h2>Infos pratiques</h2>
				<div class="article-informations">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum obcaecati tempora ex est odio dicta harum magnam nulla.</p>
				</div>
				<h2>Liens utiles</h2>
				<div class="actions">
					<div class="btn-line"><a href="#" class="btn is-anim is-secondary is-alt"><span>Nos actions de prévention</span> {{ svg('images/articles/external-link.svg') }}</a></div>
					<div class="btn-line"><a href="#" class="btn is-anim is-secondary is-alt"><span>Lien d'inscription</span> {{ svg('images/articles/external-link.svg') }}</a></div>
					<div class="btn-line"><a href="#" class="btn is-anim is-secondary is-alt"><span>Lien numero 3</span> {{ svg('images/articles/external-link.svg') }}</a></div>
				</div>
				<h2>Médias</h2>
				<div class="actions">
					<div class="btn-line"><a href="#" class="btn is-primary is-alt">{{ svg('images/articles/file.svg') }} <span>Télécharger le Document</span></a></div>
					<div class="btn-line"><a href="#" class="btn is-primary is-alt">{{ svg('images/articles/file.svg') }} <span>Télécharger la Vidéo</span></a></div>
				</div>
				<h2>Contact</h2>
				<div class="article-contact">
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum obcaecati tempora ex est odio dicta harum magnam nulla.</p>
				</div>
			</aside>
			<div></div>
		</div>
	</div>
	<script>
	function refreshContent(title, content, hassidebar, image, hasmeta) {
		document.querySelector(".article-meta h1").innerHTML = title;
		document.querySelector("article").innerHTML = content;
		if(!image || image == "") {
			image = "/images/placeholder/placeholder_cover.png";
		}
		document.querySelector(".article-hero img").src = image;
		if(hassidebar){
			document.querySelector(".article-view").classList.remove('nosidebar')
		} else {
			document.querySelector(".article-view").classList.add('nosidebar')
		}
		if(hasmeta){
			document.querySelector(".article-view").classList.remove('nometa')
		} else {
			document.querySelector(".article-view").classList.add('nometa')
		}
	}
	</script>
{% endblock %}