{%  extends('frontend/layout/base.html.twig')  %}
{% set title = 'Home' %}
{% block content %}
<section class="home-wrapper-area">

    <div class="container">
        <div class="home-slides-two owl-carousel owl-theme">
            {% for prd in head %}
            <div class="single-wrapper-item">
                <div class="row align-items-center">
                    <div class="col-lg-6 col-md-12">
                        <div class="wrapper-content">
                            <span class="sub-title">{{ prd.category.name }}</span>
                            <h1>{{ prd.name }}</h1>
                            {% set prddname = ((prd.description | raw | nl2br) | striptags('<br>')) %}
                            <p>{{ (prddname |length > 200 ? prddname|slice(0, 200) ~ ('...<a href="'~path('app_frontend_productview',{'id' : prd.id })~'" style="color:skyblue;">Read More</a>\n' | nl2br) : (prddname ~ '<br>')) | raw  }}</a>
                            <a href="{{ path('app_frontend_productview',{'id':prd.id}) }}" class="default-btn"><i class="bx bxs-detail"></i> View Product</a>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-12">
                        <div class="wrapper-image">
                            <img src="{{ uploaded_asset(prd.itempicturename | first) | imagine_filter('products_image_index') }}" alt="image">
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

    <br>
<br>
    <br>
<section class="products-area pt-70 pb-40">
    <div class="container">
        <div class="section-title">
            <h2>Our Products</h2>
        </div>

        <div class="products-slides owl-carousel owl-theme">
            {% for product in products %}
            {# @var product \App\Entity\Products #}
                <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"><a href="{{ path('app_frontend_productslist',{'idd':1,'cat':product.category.id}) }}">{{ product.category.name }}</a></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>
</section>





<section class="brands-area pt-70 pb-40">
    <div class="container">
        <div class="section-title">
            <h2>Our Suppliers</h2>
        </div>

        <div class="row align-items-center">
            <div class="col-lg-2 col-sm-4 col-md-2 col-6" style="margin-left: auto;margin-right: auto">
{#                <div class="single-brands-item">#}
                    <a class="d-block"><img src="{{ asset('assets/suppliers/vincismile.png') | imagine_filter('suppliers_image') }}" alt="image"></a>
{#                </div>#}
            </div>
<div class="col-lg-2 col-sm-4 col-md-2 col-6" style="margin-left: auto;margin-right: auto">
{#                <div class="single-brands-item">#}
                    <a class="d-block"><img src="{{ asset('assets/suppliers/gz.png') | imagine_filter('suppliers_image') }}" alt="image"></a>
{#                </div>#}
            </div>
            <div class="col-lg-2 col-sm-4 col-md-2 col-6" style="margin-left: auto;margin-right: auto">
{#                <div class="single-brands-item">#}
                    <a class="d-block"><img src="{{ asset('assets/suppliers/arsaco.png') | imagine_filter('suppliers_image') }}" alt="image"></a>
{#                </div>#}
            </div>
            <div class="col-lg-2 col-sm-4 col-md-2 col-6" style="margin-left: auto;margin-right: auto">
{#                <div class="single-brands-item" >#}
                    <a class="d-block"><img src="{{ asset('assets/suppliers/f&b.png')  | imagine_filter('suppliers_image')  }}" alt="image"></a>
{#                </div>#}
            </div>
        </div>
    </div>
</section>


{% if news | length != 0 %}
<section class="blog-area pt-70 pb-40">
    <div class="container">
        <div class="section-title">
            <h2>News <a href="{{ path('app_frontend_newslist') }}" style="float: right;color: #0a53be;font-size: 20px" >View all</a></h2>
        </div>

        <div class="row">
            {% for new in news %}
            {# @var new \App\Entity\News #}
            <div class="col-lg-4 col-md-6">

                <div class="single-blog-post">
                    <div class="post-image">
                        <a href="{{ path('app_frontend_newsview',{'id':new.id}) }}" class="d-block"><img src="{{ uploaded_asset(new.itempicture) | imagine_filter('news_image') }}" alt="image"></a>
                    </div>
                    <div class="post-content">
                        <h3><a href="{{ path('app_frontend_newsview',{'id':new.id}) }}">{{ new.title }}</a></h3>
                        <ul class="post-meta align-items-center d-flex">
                            <li>{{ new.date | totimeago }}</li>
                        </ul>
                    </div>
                </div>
            </div>
{% endfor %}
        </div>
    </div>
</section>
    {% endif %}
{% endblock %}