<div class="spectacle-list-container" id="spectacles-list">

	<div class="spectacle-list-header">
		<div class="spectacle-list-header-toolbar">
			<div class="form-nb-item" action="#">
				<select class="form-select" name="perpage">
					<option value="8">8 résultats/page</option>
					<option value="16">16 résultats/page</option>
					<option value="32">32 résultats/page</option>
					<option value="64">64 résultats/page</option>
				</select>
			</div>
			<div class="js-pagination top-pagination">
				<a href="#-1" class="pagination-prev" data-page="1">Précedent</a>
				<ul class="pagination-list">
					<li class="pagination-item"><a class="<?php echo isset($_GET['page']) && $_GET['page'] == 1 ? 'active' : ''; ?>" href="?page=1" data-page="1">1</a></li>

					<li class="pagination-item"><a class="<?php echo isset($_GET['page']) && $_GET['page'] == 2 ? 'active' : ''; ?>" href="?page=2" data-page="2">2</a></li>

					<li class="pagination-item"><a class="<?php echo isset($_GET['page']) && $_GET['page'] == 3 ? 'active' : ''; ?>" href="?page=3" data-page="3">3</a></li>

					<li class="pagination-item">…</li>

					<li class="pagination-item"><a class="" href="?page=43" data-page="43">43</a></li>

					<li class="pagination-item"><a class="" href="?page=44" data-page="44">44</a></li>
				</ul>
				<a href="#+1" class="pagination-next" data-page="44">Suivant</a>
			</div>
		</div>
	</div>


	<!-- SPECTACLES LIST -->
	<section class="spectacle-list">
		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Animation <?php echo $_GET['page']; ?></div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">DJ music</a>
			</div>
			<div class="spectacle-list-item-price">Gratuit</div>
			<div class="spectacle-list-item-city">La Baule</div>
			<div class="spectacle-list-item-date">
				<span class="date-single ">Le Vendredi 23 Septembre 2016</span>
				<span class="date-from active">Du Vendredi 23 Septembre 2016</span>
				<span class="date-to active">Au Vendredi 30 Septembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/la-baule/spectacles-et-animations/dj-sept.html" class="button button-golden-outline-small">Découvrir</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Animation</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Soirées Disco </a>
			</div>
			<div class="spectacle-list-item-price">Gratuit</div>
			<div class="spectacle-list-item-city">Menton</div>
			<div class="spectacle-list-item-date">
				<span class="date-single ">Le Vendredi 23 Septembre 2016</span>
				<span class="date-from active">Du Vendredi 23 Septembre 2016</span>
				<span class="date-to active">Au Vendredi 23 Décembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/menton/spectacles-et-animations/lessoireesdisco.html" class="button button-golden-outline-small">Découvrir</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Dîner Spectacle</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Dîner-spectacle Oriental</a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>35€</span></div>
			<div class="spectacle-list-item-city">Cassis</div>
			<div class="spectacle-list-item-date">
				<span class="date-single active">Le Samedi 24 Septembre 2016</span>
				<span class="date-from ">Du Samedi 24 Septembre 2016</span>
				<span class="date-to ">Au Samedi 24 Septembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/cassis/spectacles-et-animations/soiree-orientale.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Animation</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Thés dansants </a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>15€</span></div>
			<div class="spectacle-list-item-city">Menton</div>
			<div class="spectacle-list-item-date">
				<span class="date-single ">Le Dimanche 25 Septembre 2016</span>
				<span class="date-from active">Du Dimanche 25 Septembre 2016</span>
				<span class="date-to active">Au Dimanche 11 Décembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/menton/spectacles-et-animations/thesdansants.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">concert</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Lara Fabian </a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>49€</span></div>
			<div class="spectacle-list-item-city">Toulouse</div>
			<div class="spectacle-list-item-date">
				<span class="date-single active">Le Jeudi 29 Septembre 2016</span>
				<span class="date-from ">Du Jeudi 29 Septembre 2016</span>
				<span class="date-to ">Au Jeudi 29 Septembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/toulouse/spectacles-et-animations/larafabian.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Animation</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Oktoberfest</a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>20€</span></div>
			<div class="spectacle-list-item-city">Cap d'Agde</div>
			<div class="spectacle-list-item-date">
				<span class="date-single ">Le Vendredi 30 Septembre 2016</span>
				<span class="date-from active">Du Vendredi 30 Septembre 2016</span>
				<span class="date-to active">Au Dimanche 2 Octobre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/cap-d-agde/spectacles-et-animations/Oktoberfest.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">Dîner Spectacle</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">So Ruhl !</a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>59€</span></div>
			<div class="spectacle-list-item-city">Nice</div>
			<div class="spectacle-list-item-date">
				<span class="date-single ">Le Vendredi 30 Septembre 2016</span>
				<span class="date-from active">Du Vendredi 30 Septembre 2016</span>
				<span class="date-to active">Au Vendredi 21 Octobre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/nice/spectacles-et-animations/so-ruhl-ds.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>

		<article class="spectacle-list-item loaded">
			<div class="spectacle-list-item-genre">concert</div>
			<div class="spectacle-list-item-picture">
				<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
			</div>
			<div class="spectacle-list-item-title">
				<a href="#">Ricky Norton</a>
			</div>
			<div class="spectacle-list-item-price">À PARTIR DE <span>26€</span></div>
			<div class="spectacle-list-item-city">Bordeaux</div>
			<div class="spectacle-list-item-date">
				<span class="date-single active">Le Vendredi 30 Septembre 2016</span>
				<span class="date-from ">Du Vendredi 30 Septembre 2016</span>
				<span class="date-to ">Au Vendredi 30 Septembre 2016</span>
			</div>
			<div class="spectacle-list-item-cta">
				<a href="/fr/bordeaux/spectacles-et-animations/ricky-norton0.html" class="button button-golden-outline-small">DÉCOUVRIR</a>
			</div>
		</article>
	</section>
	<!-- end spectacle list -->

	<div class="spectacle-list-footer">
		<div class="spectacle-list-footer-toolbar js-pagination">
			<a href="#-1" class="pagination-prev" data-page="1">Précedent</a>
			<ul class="pagination-list">
				<li class="pagination-item"><a class="active" href="?page=1" data-page="1">1</a></li>

				<li class="pagination-item"><a class="" href="?page=2" data-page="2">2</a></li>

				<li class="pagination-item"><a class="" href="?page=3" data-page="3">3</a></li>

				<li class="pagination-item">…</li>

				<li class="pagination-item"><a class="" href="?page=43" data-page="43">43</a></li>

				<li class="pagination-item"><a class="" href="?page=44" data-page="44">44</a></li>
			</ul>
			<a href="#+1" class="pagination-next" data-page="45">Suivant</a>
		</div>
	</div>

</div>
