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

{% block title %}Patrimoine Roses | Liste des produits{% endblock %}

{% block body %}
    <!--gallery-grid-area start-->
    <section class="gallery-grid-area pt-125 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-12">
                    <div class="widget mb-40">
                        <div class="widget__title__box">
                            <h2 class="widget-title">{{ 'our_products'|trans }}</h2>
                        </div>
                        <div class="catagory-list">
                            <ul class="cat">
                                <li><a href="{{ path('our_roses') }}">{{ 'our_roses'|trans }} <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-12">
                    <div class="row">
                        <div class="col-xl-6 ml-10">
                            <div class="section-title">
                                <span class="left-line mb-15 pl-20">{{ 'our_roses_and_products'|trans }}</span>
                                <h2 class="mb-35" style="font-size: 38px;">{{ 'our_products'|trans }}</h2>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="portfolio-menu text-left mb-60">
                                <button data-filter="*" class="pf_btn active mb-4">{{ 'see_all_our_products'|trans }}</button><br>
                                {% for category in categories %}
                                    {% if category.id < 6 %}
                                        <button data-filter=".cat{{ loop.index }}" class="pf_btn">{{ category.name }}</button>
                                    {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="custom-row grid">
                {% for product in products %}
                    {% if product.category.id < 6 %}
                        <div class="col-xl-4 col-lg-4 col-md-6 cat{{ product.category.id }} grid-item">
                            <div class="gallery pos-rel mb-30">
                                <div class="gallery__img pos-rel mb-30">
                                    {% if product.photo %}
                                        <img src="{{ product.photo }}" alt="product" style="object-fit: cover;" width="360" height="334">
                                    {% else %}
                                        <img src="{{ asset('images/no_picture.webp') }}" alt="" class="w-100" style="object-fit: cover;" width="360" height="334">
                                    {% endif %}
                                </div>
                                <div class="gallery__text text__two pos-abl mb-30 pr-0 pr-md-5">
                                    <h3><a href="{{ path('detail_product', { id: product.id }) }}">{{ product.title }}</a></h3>
                                    <span>{{ product.category.name }}</span>
                                </div>
                                <a class="arow_btn pos-abl" href="{{ path('detail_product', { id: product.id }) }}"><i class="fal fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>
    <!--gallery-grid-area end-->

    <section class="blog-area blog-area-two pt-120 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-7 m-auto">
                    <div class="section-title text-center">
                        <span class="left-line mb-15 pl-20">{{ 'contact_and_membership'|trans }}</span>
                        <h2 class="mb-35" style="font-size: 46px; font-family: serif;">{{ 'join_the_association'|trans }}</h2>
                        <p class="mb-30">
                            {{ 'join_the_association_text'|trans | nl2br  }}
                        </p>
                        <a href="{{ path('contact') }}" class="theme_btn mt-2">{{ 'join'|trans }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}