{% from "/macros/profile-image.html" import productImageSmall %}

{% macro productSidebarSection(items, title) %}
    {% if items.length %}
    {% set nbPages = items.length / 5 %}
    <div class="container-box container-box-section">
        <div class="container_header">
            <h5 class="container_header--title container_header--item">{{ title }}</h5>
        </div>
        <div class="container_content">
            {% for page in range(0, nbPages) %}
                <div class="container-slider{{ ' show' if page === 0}}">
                    {% for pageIndex in range(0, 5) %}
                        {% set item = items[5*page + pageIndex] %}
                        {% if item %}
                            <div class="card">
                                <div class="card__image js-logo">
                                    {{ productImageSmall(item.iconUrl, item.url, item.productRibbon) }}
                                </div>
                                <div class="card__content summary">
                                    <h4 class="title__large summary--title">
                                        <a data-truncate="line" href="{{ item.url }}">{{ item.name}}</a>
                                    </h4>
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endfor %}
        </div>
        <div class="container_footer">
            <menu class="header--item toolbar toolbar__small">
                <menu class="toggle_buttons">
                    <button aria-label="prev" class="button button__small button__square js-section-prev" disabled="disabled" type="button">
                        <i class="icon__arrow_left"></i>
                    </button><button aria-label="next" class="button button__small button__square js-section-next" disabled="disabled" type="button">
                        <i class="icon__arrow_right"></i>
                    </button>
                </menu>
            </menu>
        </div>
    </div>
    {% endif %}
{% endmacro %}