{% extends "::layout.html.twig" %}

{% block title %} Annuaire - {{ parent() }} {% endblock %}

{% block container %}
    <div class="row">
        <div class="span10 offset1">
            <img src="{{ asset('img/entete-annuaire-halal.jpg') }}" alt="entête annuaire" />
        </div>
    </div>

    <hr class="line-green" />
	<p>
	L'<b>annuaire</b> vous permet de découvrir les <strong>entreprises Halal</strong> vous proposant divers services ou produits.<br />
	<br />
	Pour chaque fiche, vous avez accès :<br />
	- nom de l'<i>entreprise</i><br />
	- sa description<br />
	- son adresse<br />
	- son <u>n° de téléphone</u><br />
	- Sa fiche <b><u><a href="http://www.consommez-hallal.com" title="visitez consommez-hallal.com">Consommez-Halal</a></u></b><br />
	- Son site internet<br /><br />
	
	Consultez cet <i>annuaire</i>, de nombreuses entreprises qui diffusent le <strong>halal</strong> seront ajoutées régulièrement.
	</p>
    {# <div class="row paginator">
        <div class="span10 offset1">
            {{ knp_pagination_render(pagination) }}
        </div>
    </div>
    #}

    <div class="row paginaton-alpha">
        <div class="span10 offset1">
            <ul>
            {% for l in ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','w','x','y','z'] %}
                <li><a href="#letter_{{l}}">{{ l }}</a></li>
            {% endfor %}
            </ul>
        </div>
    </div>

    {% set current_letter = '' %}
    {% for boutique in pagination %}
        {% set first_letter = boutique.name|slice(0, 1)|lower %}
        {% if  first_letter != current_letter %}
            {% set current_letter = first_letter %}
            <div class="item_letter" id="letter_{{first_letter}}">
                <span class="line-green part-left"></span>
                <span class="letter">{{first_letter}}</span>
                <span class="line-green part-right"></span>
            </div>
        {% endif %}
        <div class="row vignette_annuaire" style="margin: 30px 0;">
            <div class="span10 offset1">
                <div class="row">
                    <div class="logo">
                        {% if boutique.getWebPath() %}
                        <img src="{{ asset(boutique.getWebPath()) }}" alt="Logo">
                            {% if boutique.boutique %}
                                <br>
                                <a href="{{ url('you_boutique_afficher', {'slug':boutique.boutique.slug}) }}">Visiter l'entreprise</a>
                            {% endif %}
                        {% endif %}
                    </div>
                    <div class="span6">
                        <h4>{{ boutique.name }}</h4>
                        <p class="category">{{ boutique.category }}</p>
                        <p class="description">{{ boutique.description }}</p>
                        <div class="address">
                            <p>{{ boutique.address }}<br />
                            <p>{{ boutique.zipcode }} {{ boutique.city }}</p>
                        </div>
                    </div>
                    <div class="span2">
                        <div class="info-right">
                            <span>{{ boutique.phone }}</span><br />
                            <span class="website">
                              <a href="{{ boutique.website }}" target="_blank" title="visiter le site internet {{ boutique.name }}">
                                {{ boutique.website }}
                              </a>
                            </span>
                        </div>
                        {% if boutique.isProducer %}
                            <div class="local_producer"></div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

    <hr class="line-green" />
    <div class="annuaire-contact">

    </div>


    <style>
        .local_producer{margin-top:25px;background:url("http://www.consommez-en-france.com/img/badge-halal-1.png") no-repeat;width:152px;height:159px;margin-left:-10px;}
        .item_letter{margin-bottom:-20px;}
        .item_letter .letter{text-transform:uppercase;font-size:48px;font-weight:700;display:inline-block;vertical-align:top;}
        .line-green.part-left{width:45px;margin:0;margin-top:30px;margin-right:5px;display:inline-block;vertical-align:top;}
        .line-green.part-right{width:810px;margin:0;margin-top:30px;margin-left:5px;display:inline-block;vertical-align:top;}
        .paginaton-alpha {
            margin: 20px 0;
            padding-top: 15px;
            background-color: #9C3;
            text-align: left;
            font-size: large;
            text-transform: uppercase;
        }

        .paginaton-alpha a {
            color: #fff;
            font-size:1.6em;
            margin-right:10px;
        }

        .paginaton-alpha a:hover {
            color: #666 !important;
            background-color:#ffffff;
        }

        .paginaton-alpha ul {
            text-decoration: none;
        }

        .paginaton-alpha li {
            display: inline;
        }

        .paginator {
            text-align: center;
        }

        .paginator {
            text-decoration: none;
            color: #769f29;
            font-size: large;
        }

        .vignette_annuaire{
            background-image: url({{ asset('img/vignette-fond1.png') }});
            width: 911px;
            height: 194px;
            repeat-x: no repeat;
            position: relative;
        }

        .vignette_annuaire .logo{
            position: absolute;
            top: 15px;
            left: 30px;
            float: left;
            width: 150px;
        }

        .vignette_annuaire .logo img{
            z-index:1000;
        }
        
        .vignette_annuaire .logo a{
            position: absolute;
            top: 153px;
            width: 150px;
            font-size:1em;
            text-align:center;
            text-decoration: underline;
            color:#333;
        }

        .vignette_annuaire .span6{
            float: left;
            margin-left:100px;
            position: relative;
            height: 190px;
        }

        .vignette_annuaire .span6 h4{
            font-size:1.6em;
            text-decoration: underline;
            font-weight: normal;
        }
		
		.vignette_annuaire .span6 .category{
			font-style: italic;
			color:#111;
			font-weight: bold;
		}
		
        .vignette_annuaire .span6 .description{
            letter-spacing: 0em;
        }

        .vignette_annuaire .span6 .address{
            color:#ffffff;
            position: absolute;
            bottom:28px;
            line-height:14px;
            letter-spacing: 0.3em;
        }

        .vignette_annuaire .span2{
            position:relative;
            top:15px;
            right:30px;
            color:#333;
            font-size:18px;
        }
        
        .vignette_annuaire .span2 .website{
            font-size:12px;
            color:#000;
            position: absolute;
            top:30px;
            right:40px;
            text-align:right;
            width:230px;
        }
        
        .vignette_annuaire .span2 .website a{
            color:#000;
            text-decoration: underline;
        }

        .line-green{
            margin: 15px;
            border-top: 3px solid #99cc33;
        }

        .annuaire-contact{
            max-width:911px;
            background-repeat: no-repeat;
            background-image: url({{ asset('img/vignette-contact.png') }});
            height:224px;
        }

        .annuaire-contact:hover{
            background-image: url({{ asset('img/vignette-contact2.png') }});

        }

		@media (max-width: 1200px) {
		.vignette_annuaire .span6{
            float: left;
            margin-left:120px;
            position: relative;
            height: 190px;
        }
		.vignette_annuaire .span6 .description{
			width:500px;
			font-size:12px;
		}
		
		.vignette_annuaire .span2 .info-right{
			text-align:right;
			width:230px;
			height:50px;
		
		}
		.vignette_annuaire .span2 .info-right .website{
		position: absolute;
		right:-90px;
		text-align:right;
		}
		.vignette_annuaire .span2 .info-right .website a{
		text-align:right;
		}
		
	}
	
	@media (max-width: 980px) {
		.vignette_annuaire .span6{
            float: left;
            margin-left:140px;
            position: relative;
            height: 190px;
        }
		.vignette_annuaire .span6 .description{
			width:500px;
			font-size:12px;
		}
		
		.vignette_annuaire .span2 .info-right{
			text-align:right;
			width:230px;
			height:50px;
			position:relative;
			right:-90px;
		
		}
		.vignette_annuaire .span2 .info-right .website{
		position: absolute;
		right:0px;
		text-align:right;
		}
		.vignette_annuaire .span2 .info-right .website a{
		text-align:right;
		}
		
		
	    .item_letter{margin-bottom:-20px;}
        .item_letter .letter{text-transform:uppercase;font-size:48px;font-weight:700;display:inline-block;vertical-align:top;}
        .line-green.part-left{width:45px;margin:0;margin-top:30px;margin-right:5px;display:inline-block;vertical-align:top;}
        .line-green.part-right{width:810px;margin:0;margin-top:30px;margin-left:5px;display:inline-block;vertical-align:top;}
        .paginaton-alpha {
            margin: 20px 0;
            padding-top: 15px;
            background-color: #9C3;
            text-align: left;
            font-size: large;
            text-transform: uppercase;
        }

        .paginaton-alpha a {
            color: #fff;
            font-size:1.1em;
            margin-right:6px;
        }

        .paginaton-alpha a:hover {
            color: #666 !important;
            background-color:#ffffff;
        }

        .paginaton-alpha ul {
            text-decoration: none;
        }

        .paginaton-alpha li {
            display: inline;
        }

        .paginator {
            text-align: center;
        }

        .paginator {
            text-decoration: none;
            color: #769f29;
            font-size: large;
        }
	
	}
	
	@media (max-width: 934px){
		.vignette_annuaire{
			background-image:none;
		}
		
		.vignette_annuaire .span6 .description{
			width:300px;
			font-size:12px;
		}
		
		.vignette_annuaire .span6 .address{
            color:#000;
            position: absolute;
            bottom:18px;
            line-height:10px;
            letter-spacing: 0.0em;
			font-size:12px;
			font-weight:bold;
        }
		
		.vignette_annuaire .span2 .info-right{
			position:relative;
			right:10px;
		}
		
		
	}
	
	@media (max-width: 768px){
		.vignette_annuaire{
			background-image:none;
					
		}
		
		.vignette_annuaire .span6{
			margin-left:200px;
			min-width:200px;
		}
		
		.vignette_annuaire .span6 .description{
			width:300px;
			font-size:12px;
		}
		
		.vignette_annuaire .span6 .address{
            color:#000;
            position: absolute;
            bottom:18px;
            line-height:10px;
            letter-spacing: 0.0em;
			font-size:12px;
			font-weight:bold;
        }
		
		.vignette_annuaire .span2 .info-right{
			position:absolute;
			left:400px;
			top:100px;
			font-size:12px;
			float:left;
		}
		.local_producer{
			background-image:none;
		}
		
	}
	
	
	
    </style>

{% endblock %}