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

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

{% block container %}
    <div class="row">
        <div class="col-md-12">
            <img src="{{ asset('images/alsace/entete-annuaire-alsace.jpg') }}" alt="entête annuaire" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <hr class="line-green" />
            <p>
                Retrouvez dans l’Annuaire toutes les entreprises alsaciennes :<br />
commerces, producteurs, artisans, restaurateurs, artistes et entrepreneurs d’Alsace…

            </p>
        </div>
    </div>

    <div class="row paginaton-alpha">
        <div class="col-md-12">
            <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="row">
                <div class="item_letter" id="letter_{{first_letter}}">
                    <span class="line-green part-left col-md-1"></span>
                    <span class="letter col-md-1">{{first_letter}}</span>
                    <span class="line-green part-right col-md-10"></span>
                </div>
            </div>
        {% endif %}
        <div class="row vignette_annuaire" style="margin: 20px 0 20px;border-bottom:1px solid black;">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-2">
                        <div class="logo">
                            {% if boutique.getWebPath() %}
                                <img src="{{ asset(boutique.getWebPath()) }}" alt="Logo">                                
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-7">
                        <h4>{{ boutique.name }}</h4>
                        <p class="category">{{ boutique.category }}</p>
                        <p class="description">{{ boutique.description }}</p>
                        <div class="address">
                            <p><img src="../images/alsace/icon_mapblack.png" alt="icone carte"/>{{ boutique.address }} <b>{{ boutique.zipcode }} {{ boutique.city }}</b></p>
							<p><img src="../images/alsace/icon_tel2.png" alt="icone carte"/><span> {{ boutique.phone }}</span></p>
							{% if boutique.boutique %}
                                 <br>
                                 <a href="{{ url('you_boutique_afficher', {'slug':boutique.boutique.slug}) }}" class="visitred">Visiter l'entreprise</a>
                               {% endif %}
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-right">
                            <span class="website">
                                <a href="{{ boutique.website }}" target="_blank" title="visiter le site internet {{ boutique.name }}">
                                    {{ boutique.name }}
                                </a>
                            </span>
                        </div>
                        {% if boutique.isProducer %}
                            <div class="local_producer"></div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    <hr class="line-green" />
    <a href="http://www.consommez-en-alsace.com/inscription-annuaire-alsace.html" 
	title="inscrivez-vous sur l'annuaire"><div class="annuaire-contact">

    </div></a>


    <style>
        .local_producer{position:absolute;margin-top:25px;background:url("http://www.consommez-en-alsace.com/images/alsace/badge-made-in-alsace.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{}
        .line-green.part-right{}
        .paginaton-alpha {
            margin: 20px 0;
            padding-top: 15px;
            background-color: #d03428;
            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;
        }
		
		.visitred{
				background-color:#d03428;
				color:#fff;
				padding:10px;
				font-size:16px;
				font-weight:500;
			}

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

        .vignette_annuaire .logo{margin-top:25px;}

        .vignette_annuaire .logo img{
            z-index:1000;
        }

        .vignette_annuaire .logo a{
            position: absolute;
            top: 180px;
            width: 150px;
            font-size:1em;
            left:30px;
            text-decoration: underline;
            color:#333;
        }



        .vignette_annuaire .col-md-7 h4{font-size:1.6em;text-decoration: underline;font-weight: normal;}
        .vignette_annuaire .col-md-7 .category{font-style: italic;color:#111;font-weight: bold;}
        .vignette_annuaire .col-md-7 .description{letter-spacing: 0em;font-size:12px;}
        .vignette_annuaire .col-md-7 .address{line-height:12px;}

        
        .vignette_annuaire .col-md-3 .info-right{color: #333;font-size: 18px;margin-top:15px;height:40px;}
        .vignette_annuaire .col-md-3 .website{font-size:12px;color:#000;line-height:10px;}
        .vignette_annuaire .col-md-3 .website a{color:#000;text-decoration: underline;}

        .line-green{border-top: 3px solid #d03428;margin-top:30px;}

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

        .annuaire-contact:hover{
            background-image: url({{ asset('images/alsace/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:430px;
                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;
				width:150px;
            }

        }

        @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 .span6 .address .visitred{
				background-color:#d03428;
				color:#fff;
				padding:10px;
			}
            .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 %}