{%  extends('frontend/layout/base.html.twig')  %}
{% set title = 'Product' %}
{% block content %}
<section class="page-title-area">
    <div class="container">
        <div class="page-title-content">
            <h1>Products Details</h1>
            <ul>
                <li><a href="{{ path('index') }}">Home</a></li>
                <li>Products Details</li>
            </ul>
        </div>
    </div>
</section>

<section class="product-details-area pt-70 pb-40">
    <div class="container">
        <div class="row">
            <div class="col-lg-5 col-md-12">
                <div class="products-details-image">
                    <ul class="products-details-image-slides owl-theme owl-carousel" data-slider-id="1">
                        {% for image in products.itempicturename %}
                        <li><img src="{{ uploaded_asset(image) | imagine_filter('products_image_index') }}" alt="image"></li>
                        {% endfor %}
                    </ul>


                    <div class="owl-thumbs products-details-image-slides-owl-thumbs" data-slider-id="1">
                        {% for image in products.itempicturename %}
                            <div class="owl-thumb-item">
                                <img src="{{ uploaded_asset(image) | imagine_filter('products_image_index') }}" alt="image">
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="col-lg-7 col-md-12">
                <div class="products-details-desc">
                    <h3>{{ products.name }}</h3>

                    {% if products.price != null %}
                    <div class="price">
                        <span class="new-price">$39.00</span>
                    </div>
                    {% endif %}

                    <ul class="products-info">
                        <li><span>Supplier:</span> <a href="{{ path('app_frontend_productslist_search_supplier',{'name':products.supplierName }) }}">{{ products.supplierName }}</a></li>
                        <li><span>Category:</span> <a href="{{ path('app_frontend_productslist',{'idd':1,'cat': products.category.id}) }}">{{ products.category.name }}</a></li>
                    </ul>
                    <br>

{#{{ 'Hi i have a question about this product:\nProduct Name:' ~  products.name ~ '\nURL:' ~ (path('app_frontend_productview',{'id':products.id}))' | urlencode #}
                    <div class="products-info-btn">
                        <a href="https://wa.me/+9647507111651?text={{ ('Hi, i have a question about this product:\nProduct Name: ' ~ products.name ~ '\nLink: ' ~ absolute_url(path('app_frontend_productview',{'id': products.id})) ~ '\nImage Link: ' ~ absolute_url(uploaded_asset(products.itempicturename | first)))  | url_encode | nl2br  }}"><i class='bx bx-envelope'></i> Ask about this product</a>
                    </div>
                    <div>
                        <h4>Description</h4>
                        <p>{{ products.description | raw }}</p>
                    </div>

                </div>
            </div>


        </div>
    </div>

    <div class="related-products">
        <div class="container">
            <div class="section-title">
                <h2>Related Products</h2>
            </div>

            <div class="products-slides owl-carousel owl-theme">
                {% for product in related %}
                    <div class="single-products-box">
                        <div class="image">
                            <a href="{{ path('app_frontend_productview',{'id':product.id}) }}" class="d-block"><img src="{{ uploaded_asset(product.itempicturename | first) | imagine_filter('products_image_index') }}" alt="image"></a>

                            <div class="new">{{ product.category.name }}</div>

                        </div>

                        <div class="content">
                            <h3><a href="{{ path('app_frontend_productview',{'id':product.id}) }}">{{ product.name }}</a></h3>
                            {% if product.price != null %}
                                <div class="price">
                                    <span class="new-price">${{ product.price }}</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}


            </div>
        </div>
    </div>
</section>
{% endblock %}