{% extends 'base.html.twig' %}

{% block title %}Modèle{% endblock %}

{% block content %}

    <section class="model grid-autfitcol border-b fullvh">
        <figure class='border-l'>
            <img src="../imgs/models/mainimage/{{ model.mainImage }}" alt="Guitare modèle LaGrange ">
        </figure>

        <article class='base-pad' data-aoe="fadeInUp">
            <h1>{{ model.name }}</h1>
            <h3>Infos</h3>
            <p data-aoe="fadeInUp">
                {{ model.description | raw }}
            </p>

            <h3>La belle origine :</h3>
            <h4>{{ model.place.name | raw }}</h4>

            <div class="flex coordinates">
                <span><a href="{{ model.place.gpslink }}" target="_blank"><img src={{asset('imgs/placeicon.svg')}} alt="belle origine lieu"></a></span>
                <span class="gps">
                    <a href="{{ model.place.gpslink }}" target="_blank">{{ model.place.gps }}</a>
                </span>
            </div>
            
            <a href="{{ model.reverLink}}" target="_blank"><span class="prix">{{ model.price }}€ </span> </a>
            <h4 class="buy"><a href="{{ model.reverLink }}" target="_blank"> commander sur Reverb </a></h4>
            
        </article>
    </section>
    <section class="separation">
        <h2>Nous aimons la Provence. </h2>
        <p>
            Le modele LaGrange redonne vie au bois des anciens mas provençaux, châteaux et  pour la plupart bicentenaires. 
        </p>
    </section>

    <section class="grid-autfitcol grid-gap-s med-pad" data-aoe="fadeIn">
        {% for image in model.images %}
            <figure>
                <img src="../imgs/models/gallery/{{ image.url }}" alt="Model la Grange">
            </figure>
        {% endfor %}
    </section>

    <section class='catalogue grid grid-autofill-4 grid-gap-med med-pad' data-aos="fadeInUp">

    {% for m in models %}
        <div class="models border grid-autfitrow-1fr">
            <a href="{{ path('guitare_show', {'id':m.id}) }}">
                <figure>
                    <img src="../imgs/models/mainimage/{{ m.mainImage }}" alt="Guitare modèle LaGrange ">
                </figure>
            </a>
            
            <div class="flex f-col x-small-pad modelinfo border-b pad-s">
                <div>
                    <h2> {{ m.name }} </h2>
                </div>

                <span class="prix">{{ m.price }}€</span>
            </div>
            <div class="x-small-pad modelorigine border-b pad-s">
                <h3>La Belle Origine :</h3>
                <h4>{{ m.place.name | raw }}</h4>

                <div class="flex coordinates">
                    <span><img src={{asset('imgs/placeicon.svg')}} alt="belle origine lieu"></span>
                    <a href="{{ m.place.gpslink }}"><span class="gps">{{ m.place.gps }}</span></a>
                </div> 
                <span class='s'><img src={{asset('imgs/(s).svg')}} alt="Belles Origines S"></span>
            </div>
            <a href="{{ path('guitare_show', {'id':m.id}) }}">
            <div class="flex just-bet x-small-pad dispo pad-s" >
                <h4>model disponible</h4>
                <div data-aoe='fadeInLefts'>
                    <svg width="90" height="23" viewBox="0 0 90 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M88.9619 14L0.0815422 14L0.081543 10L88.9619 10L88.9619 14Z" fill="#FF7222"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M85.3982 11.6657L79.6602 1.95665L83.0786 5.78323e-07L89.9951 11.7031L83.0619 23L79.6768 20.9879L85.3982 11.6657Z" fill="#FF7222"/>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M74.03 11.6657L68.292 1.95665L71.7104 5.78323e-07L78.6269 11.7031L71.6937 23L68.3087 20.9879L74.03 11.6657Z" fill="#FF7222"/>
                    </svg>
                </div>
            </div>
            </a>
        </div>
    {% endfor %}

    </section>
{% endblock %}