{% capture append = "oxidBlock_content" %}
    {% set template_title = "COMPARE"|translate %}

    {{ oView.setNoPaging() }}

    {% set articleList = oView.getCompArtList() %}
    {% set atributeList = oView.getAttributeList() %}
    <div class="container-xxl py-5">
        <div class="row">
            <h1 class="h3 page-header col pl-0 ml-3">{{ template_title }}</h1>

            {% if oxcmp_user.oxuser__oxpassword.value %}
            <div class="col-12 col-sm-3 button-col">
                {% include "page/account/inc/account_menu.html.twig" with {active_link: "compare"} %}
            </div>
            {% endif %}
        </div>

        {% if oView.getCompareItemsCnt() >= 1 %}
            <div id="comparePlayground" class="compare">
                <div id="compareLandscape" class="table-responsive compare-products">
                    <div class="d-flex flex-row flex-nowrap table">
                        <div class="col mt-auto">
                            <div class="card">
                                {% for prodNr, attrib in atributeList %}
                                <div class="attrib-title fw-bold">{{ attrib.title }}:</div>
                                {% endfor %}
                            </div>
                        </div>

                        {% for prodNr, product in articleList %}
                        <div class="col compare-product">
                            <div class="card card-block mx-2">
                                <div class="move-controls">
                                    {% if not product.hidePrev %}
                                        <a id="compareLeft_{{ product.oxarticles__oxid.value }}" href="{{ seo_url({ ident: oViewConf.getSelfLink() ~ "cl=" ~ oViewConf.getActiveClassName(), params: "fnc=moveleft&amp;aid=" ~ product.oxarticles__oxnid.value ~ "&amp;pgNr=" ~ oView.getActPage() }) }}" class="btn btn-outline-primary movePrev">&laquo;</a>
                                    {% endif %}

                                   <span>{{ translate({ ident: "MOVE" }) }}</span>

                                    {% if not product.hideNext %}
                                        <a id="compareRight_{{ product.oxarticles__oxid.value }}" href="{{ seo_url({ ident: oViewConf.getSelfLink() ~ "cl=" ~ oViewConf.getActiveClassName(), params: "fnc=moveright&amp;aid=" ~ product.oxarticles__oxnid.value ~ "&amp;pgNr=" ~ oView.getActPage() }) }}" class="btn btn-outline-primary moveNext">&raquo;</a>
                                    {% endif %}
                                </div>
                                {% include "page/compare/inc/compareitem.html.twig" with { product: product, testid: loop.index } %}

                                {% for attrib in atributeList %}
                                    <div class="attrib-text">
                                        {% if attrib.aProd[prodNr] and attrib.aProd[prodNr].value %}
                                            {{ attrib.aProd[prodNr].value }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        {% else %}
            <div class="card card-lg">
                <div class="card-body">
                    <p class="alert alert-danger">{{ translate({ ident: "MESSAGE_SELECT_AT_LEAST_ONE_PRODUCT" }) }}</p>
                </div>
            </div>
        {% endif %}
    </div>
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% include "layout/page.html.twig" %}