<div class="spectacle-filter-container" data-class="SPECTACLEFILTER">

	<!-- Keyworks list (radio) -->
	<section class="spectacle-filter-keywords-list-wrapper">
		<ul class="spectacle-filter-keywords-list">
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="tous" name="genre">
				<label for="tous">TOUS LES GENRES</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="musique" name="genre">
				<label for="musique">MUSIQUE</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="humour" name="genre">
				<label for="humour">HUMOUR</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="theatre" name="genre">
				<label for="theatre">THÉATRE</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="danse" name="genre">
				<label for="danse">DANSE</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="diner-spectacle" name="genre">
				<label for="diner-spectacle">DÎNER SPECTACLE</label>
			</li>
			<li class="spectacle-filter-keyword-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">ANIMATION</label>
			</li>
		</ul>
	</section>

	<!-- Search toolbar -->
	<div class="spectacle-filter-search-toolbar spectacle-filter-search-toolbar-national">
		<div class="spectacle-filter-search-toolbar-menu">
			<div class="spectacle-filter-search-toolbar-menu-title">FILTRER PAR :</div>
			<div class="spectacle-filter-search-toolbar-menu-date">
				<a class="date-filter active" href="#">DATE</a>
			</div>
			<div class="spectacle-filter-search-toolbar-menu-price">
				<a class="price-filter" href="#">PRIX</a>
			</div>
			<div class="spectacle-filter-search-toolbar-menu-city">
				<a class="price-filter" href="#">VILLE</a>
			</div>
		</div>
		<div class="spectacle-filter-search-toolbar-input">
			<input class="form-search" type="text" placeholder="RECHERCHE"/>
			<span class="icon-svg icon-search">
				<svg>
				    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/sprites/sprite.svg#icon-search"></use>
				</svg>
			</span>
		</div>
	</div>

	<!-- City list (radio) -->
	<section class="spectacle-filter-city-list-wrapper">
		<ul class="spectacle-filter-city-list">
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="tous" name="genre">
				<label for="tous">Bénodet</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="musique" name="genre">
				<label for="musique">Biarritz</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="humour" name="genre">
				<label for="humour">Blotzheim</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="theatre" name="genre">
				<label for="theatre">Bordeaux</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="danse" name="genre">
				<label for="danse">Cannes<br />Croisette</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="diner-spectacle" name="genre">
				<label for="diner-spectacle">Cannes<br />Les Princes</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Cap d'Agde</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Cassis</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Courrendlin</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Deauville</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Enghien</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Fribourg</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Jonzac</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">La Baule</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">La Rochelle</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Le Golf<br />de Deauville</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Le Golf de<br />La Baule</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Le Touquet</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Les Planches<br />de Deauville</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Megève</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Menton</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Montreux</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Nice</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Niederbronn</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Ouistreham</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Port Leucate</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Royan</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Sainte-Maxime</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Saint-Malo</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Toulouse</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">Trouville</label>
			</li>
			<li class="spectacle-filter-city-item">
				<input type="radio" class="input" id="animation" name="genre">
				<label for="animation">lorem</label>
			</li>
		</ul>
	</section>


	<!-- filter selected -->
	<ul class="spectacle-filter-selected-list">
		<li class="spectacle-filter-selected-item">
			<div class="spectacle-filter-selected-item-label">
				<span class="label"><span class="light">DATE</span> : DÉCEMBRE - AVRIL</span>
				<a href="#" class="close"></a>
			</div>
		</li>
		<li class="spectacle-filter-selected-item">
			<div class="spectacle-filter-selected-item-label">
				<span class="label"><span class="light">PRIX</span> : 25€ - 170€</span>
				<a href="#" class="close"></a>
			</div>
		</li>
		<li class="spectacle-filter-selected-item">
			<div class="spectacle-filter-selected-item-label">
				<span class="label"><span class="light">Ville</span> : cassis - baule</span>
				<a href="#" class="close"></a>
			</div>
		</li>
	</ul>

</div>
