<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title">DJ music
				</div>
				<div class="spectacle-list-item-price">Gratuit</div>
			</a>
			<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title"> Soirées Disco </div>
				<div class="spectacle-list-item-price">Gratuit</div>
			</a>
			<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title">
					Dîner-spectacle Oriental
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>35€</span></div>
			</a>
			<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title">Thés dansants
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>15€</span></div>
			</a>
			<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title">Lara Fabian
				</div>
				<div class="spectacle-list-item-price">À PARTIR DE <span>49€</span></div>
			</a>
			<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>
			<a href="#">
				<div class="spectacle-list-item-picture">
					<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
				</div>
				<div class="spectacle-list-item-title">Oktoberfest</div>
                <div class="spectacle-list-item-price">À PARTIR DE <span>20€</span></div>
            </a>
            <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>
        	<a href="#">
        		<div class="spectacle-list-item-picture">
        			<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
        		</div>
        		<div class="spectacle-list-item-title">So Ruhl !
        		</div>
        		<div class="spectacle-list-item-price">À PARTIR DE <span>59€</span></div>
        	</a>
        	<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>
        	<a href="#">
        		<div class="spectacle-list-item-picture">
        			<img src="img/layout/spectacle/spectacle-item-sample_desktop.jpg" alt="">
        		</div>
        		<div class="spectacle-list-item-title">Ricky Norton
        		</div>
        		<div class="spectacle-list-item-price">À PARTIR DE <span>26€</span></div>
        	</a>
        	<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>
