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

{% block title %}{{ product.name }} - Yggdrasil{% endblock %}

{% block content %}

</div>
<div class="hero-wrap hero-bread" style="background-image: url({{ asset('assets/images/bg_6.jpg') }});margin-top: -10px;">
    <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
            <div class="col-md-9 ftco-animate text-center">
                <p class="breadcrumbs"><span class="mr-2"><a href="  {{ path('home') }}">Home</a></span> <span>Boutique</span></p>
                <h1 class="mb-0 bread">Nos produits</h1>
            </div>
        </div>
    </div>
</div>


    <style>
        input{
            border:none;
            width: 100%;
        }
        input.titre{
            width: 100%;
        }
        textarea{
            border:none;
            resize : none;

        }
        select{
            position: relative;
            width: 350px;
            height: 45px;
            overflow: hidden;
            border-radius: 5px;
            border: 1px solid #CED4DA;
            cursor: pointer;
        }

    </style>

    <div class="container">
        {% if app.session.flashBag.has('success') %}
            <div class="alert alert-success">
                {% for msg in app.session.flashBag.get('success') %}
                    {{ msg }}
                {% endfor %}
            </div>
        {% endif %}
        <div class="row">
            {% for message in  app.flashes('notice')%}
                <div class=" alert alert-info">{{ message }}</div>
            {% endfor %}
            <div class="col-lg-6 mb-5 ftco-animate" style="margin-top: 3%">

                {% if product.attachments is not empty %}
                <div id="myCarousel" class="carousel slide " data-ride="carousel">
                    <ol class="carousel-indicators">
                        {% for key,attachment in product.attachments %}
                        <li data-target="#myCarousel" data-slide-to="{{ key }}" {% if key == 0 %} class="active" {% endif%}></li>
                        {% endfor %}

                    </ol>
                    <div class="carousel-inner">
                        {% for key,attachment in product.attachments %}
                        <div class="carousel-item {% if key == 0 %}active{% endif %}">
                            <a href="/images/attachments/{{ attachment.image }}" class="image-popup"><img src="/images/attachments/{{ attachment.image }}" class="img-fluid" alt="{{ product.name }}"></a>



                        </div>

                        {% endfor %}
                    </div>
                    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                {% else %}
                    <a href="/uploads/{{ product.illustration }}" class="image-popup"><img src="/uploads/{{ product.illustration }}" class="img-fluid" alt="{{ product.name }}"></a>
                {% endif %}
            </div>
            <div class="col-lg-6 product-details pl-md-5 my-auto ftco-animate">
                <h3> {{ product.name }}</h3>
                <p>{{ product.subtitle }}</p>
                <p class="price"><span>{{ (product.price / 100)|number_format(2,',', '.')}} €</span></p>
                <hr>
                <p>

                    {{ product.description }}

                </p>

                <h5> Choisir la dimension de votre bracelet :</h5>
                {{ form_start(form, {'attr': {'class': 'mt-4 p-4 bg-light'}}) }}
                <div class="form-group">
                    {{ form_label(form.dimension) }}
                    {{ form_widget(form.dimension, {
                        'attr': {
                            'class': 'form-control ' ~ (form.dimension.vars.valid ? '' : 'is-invalid')
                        }
                    }) }}
                    <div class="invalid-feedback">
                        {{ form_errors(form.dimension) }}
                    </div>
                </div>
                <div class="form-group">
                    {{ form_label(form.quantity) }}
                    {{ form_widget(form.quantity, {
                        'attr': {
                            'class': 'form-control ' ~ (form.quantity.vars.valid ? '' : 'is-invalid')
                        }
                    }) }}
                    <div class="invalid-feedback">
                        {{ form_errors(form.quantity) }}
                    </div>
                </div>

                {{ form_end(form) }}





            </div>
        </div>
    </div>
    <section class="ftco-section bg-light">
        <div class="container">
            <div class="row justify-content-center mb-3 pb-3">
                <div class="col-md-12 heading-section text-center ftco-animate">
                    <h2 class="mb-4">Best Sellers</h2>
                    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                {% for product in products %}
                    <div class="col-sm-6 col-md-6 col-lg-3 ftco-animate">
                        {% include 'product/single_product.html.twig' %}
                    </div>
                {% endfor %}

            </div>
        </div>
    </section>

{% endblock %}