{% set template_title = "COMPARE"|translate %}
{% capture append = "oxidBlock_title" %}
    <h1 class="c4s-account-page-header">{{ template_title }}</h1>
{% endcapture %}

{% capture append = "oxidBlock_content" %}
    {{ oView.setNoPaging() }}

    {% set articleList = oView.getCompArtList() %}
    {% set atributeList = oView.getAttributeList() %}

    {{ script({ include: "js/pages/compare.min.js", dynamic: __oxid_include_dynamic }) }}

    {% if oView.getCompareItemsCnt() >= 1 %}
        <div id="comparePlayground">
            <div id="compareLandscape">
                <table class="table-bordered">
                    <tbody>
                        <tr class="products">
                            {% for iProdNr, product in articleList %}
                                {% if loop.first %}
                                    <th class="attrib-title no-border" scope="row">&nbsp;</th>
                                {% endif %}

                                <td class="item-wrapper text-center">
                                    <div class="move-controls btn-group" role="group">
                                        {% if not product.hidePrev %}
                                            <a id="compareLeft_{{ product.oxarticles__oxid.value }}" href="{{ seo_url({ ident: oViewConf.getSelfLink()|raw ~"cl=" ~ oViewConf.getActiveClassName(), params: "fnc=moveleft&amp;aid=" ~ product.oxarticles__oxnid.value ~ "&amp;pgNr=" ~ oView.getActPage() }) }}" class="btn btn-secondary movePrev">&laquo;</a>
                                        {% endif %}

                                        <a href="javascript:;" class="btn btn-secondary disabled">{{ translate({ ident: "MOVE" }) }}</a>

                                        {% if not product.hideNext %}
                                            <a id="compareRight_{{ product.oxarticles__oxid.value }}" href="{{ seo_url({ ident: oViewConf.getSelfLink()|raw ~ "cl=" ~ oViewConf.getActiveClassName(), params: "fnc=moveright&amp;aid=" ~ product.oxarticles__oxnid.value ~ "&amp;pgNr=" ~ oView.getActPage() }) }}" class="btn btn-secondary moveNext">&raquo;</a>
                                        {% endif %}
                                    </div>
                                    {% include "page/compare/inc/compareitem.html.twig" with {product: product, testid: loop.index} %}
                                </td>
                            {% endfor %}
                        </tr>
                        {% for iProdNr, oAttrib in atributeList %}
                            <tr>
                                <th class="attrib-title" scope="row">{{ oAttrib.title }}:</th>

                                {% for iProdNr, product in articleList %}
                                    <td class="attrib-text">
                                        {% if oAttrib.aProd[iProdNr] and oAttrib.aProd[iProdNr].value %}
                                            {{ oAttrib.aProd[iProdNr].value }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                {% endfor %}
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    {% else %}
        <div class="alert alert-danger" role="alert">{{ translate({ ident: "MESSAGE_SELECT_AT_LEAST_ONE_PRODUCT" }) }}</div>
    {% endif %}
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% if not oxcmp_user.oxuser__oxpassword.value %}
    {% include "layout/page.html.twig" %}
{% else %}
    {% capture append = "oxidBlock_sidebar" %}
        {% include "page/account/inc/account_menu.html.twig" with {active_link: "compare"} %}
    {% endcapture %}
    {% include "layout/page.html.twig" with {sidebar: "left", blHideBreadcrumb: true} %}
{% endif %}