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

{% block ext_head %}
	<meta name="Description" content="Article de Portfolio de William MAGAUD, {{ article.title }}">
{% endblock %}

{% block title %}Article{% endblock %}
{% block h1 %}<h1 class="display-3  text-white">{{ article.title }}</h1>{% endblock %}

{% block body %}

<section class="section">
    <div class="container">
		<div class="card card-profile shadow mt--300 position-relative">
			<a href="/#section-pf" class="btn btn-sm btn-outline-primary position-absolute" style="top: -10px; left: -20px">Retour</a>
			<div class="px-4">
				<div class="py-5 text-center">
					<div class="row justify-content-center">
						<div class="col-lg-9">
							<p>{{ article.description|raw }}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

<section class="section section-lg">
	<div class="container">
		<div class="row align-items-center">
			{% for media in article.medias %}
				<div class="col-6 col-md-4 col-xl-3 my-3">
					<img src="/{{ media.file('md') }}" data-src-lg="/{{ media.file('lg') }}" alt="" class="rounded img-fluid" onclick="zoomImg(this)">
				</div>
			{% endfor %}
		</div>
	</div>
</section>

<script>
	function zoomImg(img) {
		img = $(img).data('srcLg')
		$('#modal-img img').attr('src', img)
		$('#modal-img').modal('show')
	}
</script>

<style>
	.img-fluid {
		cursor: pointer;
	}
	.modal-dialog,
	.modal-content,
	.modal-content img {
		max-width: 90vw;
		max-height: 90vh;
		width: auto;
		height: auto;
		margin: auto;
	}
	.modal-backdrop {
		opacity: 0.8 !important;
	}
</style>

<div class="modal fade" id="modal-img" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<img src="" alt="">
		</div>
	</div>
</div>

{% endblock %}