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

{% block title %}{% endblock %}

{% block body %}
{#
    <!--product-details-area start-->
    <section class="product-details-area pt-130 pb-30">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-7 col-lg-7 col-12">
                    <!--
                    <div class="shop-thumb-tab mb-30">
                        <ul class="nav" id="myTab2" role="tablist">
                            <li class="nav-item mb-20">
                                <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab"
                                   aria-selected="false"><img src="{{ asset('images/product.png') }}" alt="" height="139" width="147" style="object-fit: contain;"></a>
                            </li>
                            <li class="nav-item mb-20">
                                <a class="nav-link active show" id="profile-tab" data-toggle="tab" href="#profile"
                                   role="tab" aria-selected="true"><img src="{{ asset('images/product.png') }}"
                                                                        alt="" height="139" width="147" style="object-fit: contain;"></a>
                            </li>
                            <li class="nav-item mb-20">
                                <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile1" role="tab"
                                   aria-selected="false"><img src="{{ asset('images/product.png') }}" alt="" height="139" width="147" style="object-fit: contain;"></a>
                            </li>
                        </ul>
                    </div>

                    <div class="product-details-img mb-30">
                        <div class="tab-content" id="myTabContent2">
                            <div class="tab-pane fade show active" id="home" role="tabpanel">
                                <div class="product-large-img">
                                    <img src="{{ asset('images/product.png') }}" alt="" height="454" width="281" style="object-fit: cover;">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile" role="tabpanel">
                                <div class="product-large-img">
                                    <img src="{{ asset('images/product.png') }}" alt="" height="454" width="281" style="object-fit: cover;">
                                </div>
                            </div>
                            <div class="tab-pane fade" id="profile1" role="tabpanel">
                                <div class="product-large-img">
                                    <img src="{{ asset('images/product.png') }}" alt="" height="454" width="281" style="object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                    -->
                    <div class="product-details-img mb-30">
                        <div class="tab-content" id="myTabContent2">
                            <div class="tab-pane fade show active" id="home" role="tabpanel">
                                <div class="product-large-img">
                                    <img src="{{ product.photo }}" alt="" height="454" width="281" style="object-fit: cover;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-5 col-12">
                    <div class="product-details mb-25 pl-30 pr-140">
                        <h3 class="product-details-title">{{ product.title }}</h3>
                        <div class="product-details-rating mb-10" style="visibility: hidden">
                            <a href="#"><i class="fas fa-star"></i></a>
                            <a href="#"><i class="fas fa-star"></i></a>
                            <a href="#"><i class="fas fa-star"></i></a>
                            <a href="#"><i class="fas fa-star"></i></a>
                            <a href="#"><i class="fas fa-star"></i></a>
                        </div>
                        <!-- <span class="mb-30">$89.00</span> -->
                        <p class="mb-25">{{ product.description }}</p>
                        <div class="product-details-action mb-30" style="visibility: hidden">
                            <form action="#">
                                <div class="plus-minus mb-10">
                                    <div class="cart-plus-minus">
                                        <input type="text" value="1">
                                        <div class="dec qtybutton">-</div>
                                        <div class="inc qtybutton">+</div>
                                    </div>
                                </div>
                                <button class="btn" type="submit">add to cart</button>
                            </form>
                        </div>
                        <div class="product-details-social mb-10" style="visibility: hidden;">
                            <span>Partager :</span>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-youtube"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--product-details-area start-->
    <!--product-desc-area start-->
    <section class="product-desc-area pb-105">
        <div class="container">
            <div class="row">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                           aria-controls="nav-home" aria-selected="true">Description</a>
                        <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                           aria-controls="nav-profile" aria-selected="false">Allergènes</a>
                        <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
                           aria-controls="nav-contact" aria-selected="false">Je suis intéressé</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                         aria-labelledby="nav-home-tab">
                        <div class="product__text">
                            <p class="mb-25">Sorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur xcepteur sint occaecat cupidatat non proident, sunt.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
                                exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                                irure dolor in reprehenderit in voluptate velit esse cdolore eu fugiat nulla
                                pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                                deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla
                                gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum
                                elit, nec luctus magna felis sollicitudinInteger in mauris eu nibh euismod gravida.
                                Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam
                                tempor. Ut ullamcorper, </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                        <div class="product__text">
                            <p class="mb-25">Sorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                                nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur xcepteur sint occaecat cupidatat non proident, sunt.</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                        <div class="cta-area grey-bg pos-rel p-5">
                            <div class="form-area form-area-03 row pr-105">
                                <div class="col-md-6 col-12">
                                    <div class="contact-name4 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Nom">
                                        <span><i class="fal fa-user"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="contact-mail3 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Email">
                                        <span><i class="fal fa-envelope-open"></i></span>
                                    </div>
                                </div>
                                <!--
                                <div class="col-md-12 col-12">
                                    <div class="contact-subject4 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Subject" value="Je suis intéréssé par Eau de toilette / Fleur de rose" disabled>
                                        <span class="pos-abl"><i class="far fa-chevron-down"></i></span>
                                    </div>
                                </div>
                                -->
                                <div class="col-12">
                                    <div class="contact-message4 pos-rel mb-30">
                                        <textarea name="message" id="message" placeholder="Message" style="font-size: 16px;">Bonjour, je suis intéressé par l'eau de toilette fleur de rose et j'aimerai être recontacté ...</textarea>
                                        <span><i class="fal fa-pencil"></i></span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <a href="#" class="theme_btn">Envoyer</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--product-desc-area end-->
    <!--feature-product-area start-->
    <section class="feature-product-area pt-120 pb-95">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 offset-xl-2">
                    <div class="section-title text-center mb-80">
                        <span class="mb-15">Our Garden Store</span>
                        <h2 class="mb-30">Features Product</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-3 col-lg-3 col-md-6">
                    <div class="product text-center mb-30">
                        <div class="product__thumb mb-35 pos-rel">
                            <a href="#"><img src="{{ asset('images/product.png') }}" alt=""></a>
                        </div>
                        <div class="product__content">
                            <h6><a href="shop-details.html">Watering Can</a></h6>
                            <span>$99.99</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6">
                    <div class="product text-center mb-30">
                        <div class="product__thumb mb-35 pos-rel">
                            <a href="#"><img src="{{ asset('images/product.png') }}" alt=""></a>
                        </div>
                        <div class="product__content">
                            <h6><a href="shop-details.html">Gardening Shoes</a></h6>
                            <span>$99.99</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6">
                    <div class="product text-center mb-30">
                        <div class="product__thumb mb-35 pos-rel">
                            <a href="#"><img src="{{ asset('images/product.png') }}" alt=""></a>
                        </div>
                        <div class="product__content">
                            <h6><a href="shop-details.html">Render-Isolated</a></h6>
                            <span>$99.99</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-6">
                    <div class="product text-center mb-30">
                        <div class="product__thumb mb-35 pos-rel">
                            <a href="#"><img src="{{ asset('images/product.png') }}" alt=""></a>
                        </div>
                        <div class="product__content">
                            <h6><a href="shop-details.html">Hand Gloves</a></h6>
                            <span>$99.99</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--feature-product-area end-->
#}

    <!--product-details-area start-->
    <section class="product-details-area pt-130 pb-30">
        <div class="container">
            <div class="row align-items-center">

                <div class="col-xl-5 col-lg-7 col-12">
                    {% if product.photo %}
                        <img src="{{ product.photo }}" alt="" class="w-100" height="500" style="object-fit: cover;">
                    {% else %}
                        <img src="{{ asset('images/no_picture.webp') }}" alt="" class="w-100" style="object-fit: cover;" height="500">
                    {% endif %}
                </div>

                <div class="col-xl-5 col-lg-5 col-12" style="height: 500px;">
                    <div class="product-details mb-25 pl-30">
                        <h3 class="product-details-title mb-5" style="font-family: Playfair Display; font-size: 55px;">{{ product.title }}</h3>
                        <p class="mb-25">{{ product.shortDescription|nl2br }}</p>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!--product-details-area start-->
    <!--product-desc-area start-->
    <section class="product-desc-area pb-105 mt-60">
        <div class="container">
            <div class="row">
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                        <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                           aria-controls="nav-home" aria-selected="true">Description</a>
                        <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab"
                           aria-controls="nav-contact" aria-selected="false">Je suis intéressé</a>
                    </div>
                </nav>
                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                         aria-labelledby="nav-home-tab">
                        <div class="product__text" style="min-width: 900px">
                            <p class="mb-25">
                                {{ product.description|nl2br }}
                            </p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                        <div class="cta-area grey-bg pos-rel p-5">
                            <div class="form-area form-area-03 row">
                                <div class="col-md-6 col-12">
                                    <div class="contact-name4 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Nom">
                                        <span><i class="fal fa-user"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-6 col-12">
                                    <div class="contact-mail3 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Email">
                                        <span><i class="fal fa-envelope-open"></i></span>
                                    </div>
                                </div>
                                <!--
                                <div class="col-md-12 col-12">
                                    <div class="contact-subject4 pos-rel mb-30">
                                        <input type="text" class="form-control" placeholder="Subject" value="Je suis intéréssé par Eau de toilette / Fleur de rose" disabled>
                                        <span class="pos-abl"><i class="far fa-chevron-down"></i></span>
                                    </div>
                                </div>
                                -->
                                <div class="col-12">
                                    <div class="contact-message4 pos-rel mb-30">
                                        <textarea name="message" id="message" placeholder="Message" style="font-size: 16px;">Bonjour, je suis intéressé par {{ product.title }} et j'aimerai être recontacté ...</textarea>
                                        <span><i class="fal fa-pencil"></i></span>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <a href="#" class="theme_btn">Envoyer</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--product-desc-area end-->
    <!--feature-product-area start-->
    <section class="feature-product-area pt-120 pb-95">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 offset-xl-2">
                    <div class="section-title text-center mb-80">
                        <span class="mb-15">Nos Rosiers & Produits</span>
                        <h2 class="mb-30">Autres produits</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                {% for product in othersProducts %}
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="product text-center mb-30">
                            <div class="product__thumb mb-35 pos-rel">
                                <a href="{{ path('detail_product', { id: product.id }) }}"><img src="{{ product.photo }}" alt="" width="268" height="248" style="object-fit: cover;"></a>
                            </div>
                            <div class="product__content">
                                <h6><a href="{{ path('detail_product', { id: product.id }) }}">{{ product.title }}</a></h6>
                            </div>
                        </div>
                    </div>
                {% endfor %}

            </div>
        </div>
    </section>
    <!--feature-product-area end-->
{% endblock %}