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

{% block title %}{% if Industry.name is not empty %}{{ Industry.name }}{% endif %}{% endblock %}

{% block body %}

    {% include('elements/_navigation.html.twig') %}


    <section class="list-rental-type sec-30">
        <div class="container-fluid">
            <div class="container">
                <div class="row no-gutters">
                    <div class="bread text-center">
                        <h1><a href="{{ path('rentals_page') }}" class="blue-text-color">{{ 'translate.rentals'|trans }}</a> / {{ Industry.name }}</h1>
                    </div>
                    <div class="col-12 text-center w-100 mt-5">
                        <div class="row gallery">
                            {% for product in Products %}

                                <div class="col-sm-6 col-lg-3 mb-3 all grid-item product {% for ind in product.industry %} ind{{ ind.id}} {% endfor %}">
                                    <div class="portfolio-wrapper">
                                        <div class="portfolio-image mb-2">
                                            <img src="{{ asset('uploads/images/' ~ product.image) }}" alt="{{ product.title }}" />
                                        </div>
                                        <h2 class="text-white">{{ product.title }}</h2>
                                        <div class="portfolio-overlay">
                                            <div class="portfolio-content">
                                                <a class="popimg ml-0" href="#">
                                                    <i class="ti-zoom-in display-24 display-md-23 display-lg-22 display-xl-20"></i>
                                                </a>

                                                <p class="button"><a href="{{ path('rentals_detail_page', {'slug': product.slug }) }}">{{ 'translate.rent'|trans }}</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% endfor %}

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

    <section class="list-rental-products sec-30">
        <div class="container-fluid">
            <div class="container">
                <div class="row no-gutters">
                    <h3 class="filtering_title text-center mb-3 text-white">{{ 'translate.all_rental_products'|trans }}</h3>
                    <div class="filtering col-sm-12 text-center mb-5">
                        <span data-filter=".all" class="active filtering_title">{{ 'translate.all_purposes'|trans }}</span>
                        {% for ind in Industries %}
                            <span data-filter=".ind{{ ind.id }}" class="filtering_title">{{ ind.name }}</span>
                        {% endfor %}

                    </div>
                    <div class="col-12 text-center w-100 mt-5">
                        <div class="row gallery">
                            {% for product in Products %}

                                <div class="col-sm-6 col-lg-3 mb-3 all grid-item product {% for ind in product.industry %} ind{{ ind.id}} {% endfor %}">
                                    <div class="portfolio-wrapper">
                                        <div class="portfolio-image mb-2">
                                            <img src="{{ asset('uploads/images/' ~ product.image) }}" alt="{{ product.title }}" />
                                        </div>
                                        <h2 class="text-white">{{ product.title }}</h2>
                                        <div class="portfolio-overlay">
                                            <div class="portfolio-content">
                                                <a class="popimg ml-0" href="#">
                                                    <i class="ti-zoom-in display-24 display-md-23 display-lg-22 display-xl-20"></i>
                                                </a>

                                                <p class="button"><a href="{{ path('rentals_detail_page', {'slug': product.slug, 'lang': app.request.locale}) }}">Rent</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            {% endfor %}

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

    {% include('elements/_footer_buy.html.twig') %}


    {% include('elements/_footer.html.twig') %}

{% endblock %}