<div class="spectacle-filter-container tournoi-filter-club-container" data-class="TOURNOIFILTERCLUB">
    <!-- Keyworks list (radio) -->
    <script type="text/template" id="spectaclefiltercities">
        <li class="spectacle-filter-city-item">
            <input type="checkbox" id="{{city}}" name="genre" class="input" value="{{city}}" {{checked}}>
            <label for="{{city}}">{{city}}</label>
        </li>
    </script>
    <script type="text/template" id="spectaclefilterpagination">
        <li class="pagination-item"><a class="{{active}}" href="#{{index}}">{{index}}</a></li>
    </script>
    <script type="text/template" id="spectaclefilterpaginationbreaker">
        <li class="pagination-item">…</li>
    </script>
    <script type="text/template" id="spectaclefilterselecteddate">
        <div class="spectacle-filter-selected-item-label">
            <span class="label"><span class="light">DATES</span> : ${{min}} - ${{max}}</span>
            <a href="#" class="close js-reset-filter" data-filter="date"></a>
        </div>
    </script>
    <script type="text/template" id="spectaclefilterselectedcities">
        <div class="spectacle-filter-selected-item-label">
            <span class="label"><span class="light">GENRES</span> : {{cities}}</span>
            <a href="#" class="close js-reset-filter" data-filter="cities"></a>
        </div>
    </script>
    <script type="text/template" id="spectaclefilterselectedbuyin">
        <div class="spectacle-filter-selected-item-label">
            <span class="label"><span class="light">BUYIN</span> : {{buyin}}</span>
            <a href="#" class="close js-reset-filter" data-filter="buyin"></a>
        </div>
    </script>

    <?php if (isset($_GET['prod'])) : // used concatened and minified scripts ?>
        <script>
            currentCity="",showsCurrency="€",showsCountry="FRANCE";
        </script>
    <?php else : ?>
        <script>
            //                currentCity = 'Enghien-les-Bains';
            currentCity = '';
            showsCurrency = "€";
            showsCountry = "FRANCE";
        </script>
    <?php endif ?>


	<!-- ============== -->
    <!-- Search toolbar -->
	<!-- ============== -->
    <div class="spectacle-filter-search-toolbar spectacle-filter-search-toolbar-national">
    	<div class="spectacle-filter-search-toolbar-menu-title mobile-only">FILTRER PAR</div>

        <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-buyin">
                <a class="buyin-filter JS_toggler" data-toggler-id="buyinitem" data-toggler-group="display-filter" href="#">BUY IN</a>
            </div>

            <div class="spectacle-filter-search-toolbar-menu-date">
                <a class="date-filter JS_toggler" data-toggler-id="date" data-toggler-group="display-filter"
                   href="#">DATES</a>
            </div>
            
            <div class="spectacle-filter-search-toolbar-menu-city">
                <a class="city-filter JS_toggler" data-toggler-id="city" data-toggler-group="display-filter" href="#">GENRES</a>
            </div>
        </div>


        <div class="spectacle-filter-search-toolbar-input">
            <input class="form-search js-filter-search" type="text" name="search" 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>


    <!-- range container -->
    <div class="spectacle-filter-city-list-wrapper">

        <div class="spectacle-filter-date-range JS_item_toggler" 
        		data-toggler-group-no-close="true"
             	data-toggler-group="display-filter"
             	data-toggler-itemid="date">
            <span id="date-range" data-date-min="2017/03" data-date-max="2018/02"></span>
            <input type="hidden" name="datefrom" value="2017/04"/>
            <input type="hidden" name="dateto" value="2018/01"/>
        </div>

        <!-- LISTE DES BUYIN -->
        <ul class="spectacle-filter-buyin-list JS_item_toggler" 
        	data-toggler-group="display-filter" 
        	data-toggler-group-no-close="true" 
        	data-toggler-itemid="buyinitem" 
        	id="spectaclefilterbuyinlist">
            
            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="max-100" name="buyin" class="input" value="- de 100€">
                <label for="max-100">- de 100€</label>
            </li>
            
            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="beetween-100-500" name="buyin" class="input" value="100€ à 500€">
                <label for="beetween-100-500">100€ à 500€</label>
            </li>

            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="beetween-500-1000" name="buyin" class="input" value="500€ à 1000€">
                <label for="beetween-500-1000">500€ à 1000€</label>
            </li>

            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="min-1000" name="buyin" class="input" value="+ de 1000€">
                <label for="min-1000">+ de 1000€</label>
            </li>
        </ul>

        <!-- LISTE DES GENRES -->
        <ul class="spectacle-filter-city-list JS_item_toggler" 
        data-toggler-group="display-filter" 
        data-toggler-group-no-close="true" 
        data-toggler-itemid="city" 
        id="spectaclefiltergenreslist">

            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="cash" name="cities" class="input" value="cash">
                <label for="cash">cash</label>
            </li>
            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="satellite" name="cities" class="input" value="satellite">
                <label for="satellite">satellite</label>
            </li>
            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="single reentry" name="cities" class="input" value="single reentry">
                <label for="single reentry">single reentry</label>
            </li>
            <li class="spectacle-filter-city-item">
                <input type="checkbox" id="knockout" name="cities" class="input" value="knockout">
                <label for="knockout">knockout</label>
            </li>
			<li class="spectacle-filter-city-item">
                <input type="checkbox" id="survivor" name="cities" class="input" value="survivor">
                <label for="survivor">survivor</label>
            </li>
			<li class="spectacle-filter-city-item">
                <input type="checkbox" id="highroller" name="cities" class="input" value="highroller">
                <label for="highroller">highroller</label>
            </li>
			<li class="spectacle-filter-city-item">
                <input type="checkbox" id="big blind ante" name="cities" class="input" value="big blind ante">
                <label for="big blind ante">big blind ante</label>
            </li>
			<li class="spectacle-filter-city-item">
                <input type="checkbox" id="sit n go" name="cities" class="input" value="sit n go">
                <label for="sit n go">sit n go</label>
            </li>
        </ul>
    </div>


    <!-- filter selected -->
    <ul class="spectacle-filter-selected-list tournoi-filter-selected-list">
        <li class="spectacle-filter-selected-item js-filter-selected js-filter-date">
            <div class="spectacle-filter-selected-item-label">
                <span class="label"><span class="light">DATE</span> : {{min}} - {{max}}</span>
                <a href="#" class="close"></a>
            </div>
        </li>
        <li class="spectacle-filter-selected-item js-filter-selected js-filter-buyin">
            <div class="spectacle-filter-selected-item-label">
                <span class="label"><span class="light">BUYIN</span> : {{buyin}}</span>
                <a href="#" class="close"></a>
            </div>
        </li>
        <li class="spectacle-filter-selected-item js-filter-selected js-filter-cities">
            <div class="spectacle-filter-selected-item-label">
                <span class="label"><span class="light">GENRES</span> : {{city}}</span>
                <a href="#" class="close"></a>
            </div>
        </li>
    </ul>

    <div class="tournoi-filter-results-number mtb50">
        <span class="tournoi-filter-results-val">22</span><span>résultats</span>
    </div>

</div>
