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

{% block banner %}
    {% if channel.banner is not empty %}
        <div class="ecom__homepage-top-text d-md-flex d-none">
            <img src="{{ asset(channel.banner) }}" style="width:100%;height:auto;" alt="">
            <div class="banner-text">
                <div class="banner-text-desc">{{ channel.textBlock | raw }}</div>
                {% if channel.bannerLink is not empty %}
                    <a class="banner-text-btn" href="{{ channel.bannerLink }}">{{ 'Handla nu' | trans }}</a>
                {% endif %}
            </div>
        </div>
    {% endif %}
    {% if channel.bannerMobile is not empty %}
        <div class="ecom__homepage-top-text d-md-none d-sm-flex">
            {% if channel.bannerLink is not empty %}
            <a href="{{ channel.bannerLink }}">
                {% endif %}
                <img src="{{ asset(channel.bannerMobile) }}" style="width:100%;height:auto;" alt="">
                {% if channel.bannerLink is not empty %}
            </a>
            {% endif %}
        </div>
    {% endif %}

    {% if channel.banner2 is not empty or channel.banner3 is not empty %}
        <div class="ecom__homepage-banner ecom__homepage-banner23">
            <div>
                {% if channel.banner2 is not empty %}
                    {% if channel.bannerLink2 is not empty %}
                        <a href="{{ channel.bannerLink2 }}">
                    {% endif %}
                    <img src="{{ asset(channel.banner2) }}" style="width:100%;height:auto;" alt="">
                    {% if channel.bannerLink2 is not empty %}
                        </a>
                    {% endif %}
                {% endif %}
            </div>
            <div>
                {% if channel.banner3 is not empty %}
                    {% if channel.bannerLink3 is not empty %}
                        <a href="{{ channel.bannerLink3 }}">
                    {% endif %}
                    <img src="{{ asset(channel.banner3) }}" style="width:100%;height:auto;" alt="">
                    {% if channel.bannerLink3 is not empty %}
                        </a>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}
    <div class="category-page latest-products">
        <div class="niclas-custom-width">
            <h1 class="page__title page__title--h1">
                <span>{{ 'Nyheter' | trans }}</span>
            </h1>
        </div>
        <div class="category-page__products">
            {% for product in newProducts %}
                {{ include('webshop/__product_item.html.twig', {'product': product}) }}
            {% else %}
                {{ 'No items !!!' | trans }}
            {% endfor %}
        </div>
        <div class="d-flex justify-content-center mt-5">
            <a class="niclas-button" href="{{ path('ecom_product_list', {'channelEcomId': app.request.get('channelEcomId')}) }}">{{ 'Visa alla' | trans }}</a>
        </div>
    </div>
    <div class="niclas-custom-width popular-products">
        <div class="popular-products">
            <h1 class="page__title page__title--h1">
                <span>{{ 'Populära produkter' | trans }}</span>
            </h1>
            <div class="popular-products-list">
                {% for product in popularProducts %}
                    {{ include('webshop/__product_item.html.twig', {'product': product}) }}
                {% else %}
                    {{ 'No items !!!' | trans }}
                {% endfor %}
            </div>
            <div class="d-flex justify-content-center mt-5">
                <a class="niclas-button" href="{{ path('ecom_product_list', {'channelEcomId': app.request.get('channelEcomId')}) }}">{{ 'Visa alla' | trans }}</a>
            </div>
        </div>
    </div>
{% endblock %}