{% set aArticleAccessories = oArticleAccessoryList.getArray() %}

<div class="card">
    <div class="card-header">
        <h4 class="panel-title">{{ translate({ ident: "C4S_UPSELLING_ACCESSOIRES" }) }}</h4>
    </div>

    <div class="card-body">
        <div class="c4s-accessory-select">
            <table class="table table-responsive c4s-table-accessoires">
                {% for oArticleAccessory in aArticleAccessories %}
                    <tr>
                        <td class="c4s-td-centered">
                            <span>{{ oArticleAccessory.oxarticles__oxtitle.value }}</span><br />
                            <span>{{ oArticleAccessory.oxarticles__oxartnum.value }}</span>
                        </td>
                        <td class="c4s-td-centered">
                            <span class="price">{# js #}</span>
                        </td>
                        <td class="c4s-td-centered">
                            <div class="checkbox">
                                {% set oxUnitName = oArticleAccessory.oxarticles__oxunitname.value %}
                                {% if oxUnitName == "_UNIT_ST" or oxUnitName == "ST" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_ST" %}
                                {% elseif oxUnitName == "_UNIT_M" or oxUnitName == "M" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_M" %}
                                {% elseif oxUnitName == "_UNIT_FLA" or oxUnitName == "FLA" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_FLA" %}
                                {% elseif oxUnitName == "_UNIT_DOS" or oxUnitName == "DOS" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_DOS" %}
                                {% elseif oxUnitName == "_UNIT_VE" or oxUnitName == "VE" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_VE" %}
                                {% elseif oxUnitName == "_UNIT_KG" or oxUnitName == "KG" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_KG" %}
                                {% elseif oxUnitName == "_UNIT_KAN" or oxUnitName == "KAN" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_KAN" %}
                                {% elseif oxUnitName == "_UNIT_SA" or oxUnitName == "SA" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_SA" %}
                                {% elseif oxUnitName == "_UNIT_ROL" or oxUnitName == "ROL" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_ROL" %}
                                {% elseif oxUnitName == "_UNIT_PAK" or oxUnitName == "PAK" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_PAK" %}
                                {% elseif oxUnitName == "_UNIT_GEB" or oxUnitName == "GEB" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_GEB" %}
                                {% elseif oxUnitName == "_UNIT_M2" or oxUnitName == "M2" %}
                                    {% set sAccessoireUnitName = "C4S_OXUNITNAME_M2" %}
                                {% else %}
                                    {% set sAccessoireUnitName = oArticle.oxarticles__oxunitname.value %}
                                {% endif %}
                                <input type="checkbox"
                                   name="c4sAccessoires"
                                   id="c4sAccessoireCheckbox_{{ loop.index }}"
                                   data-basketitemid="{{ sNewBasketItemId }}"
                                   data-accessoire-id="{{ oArticleAccessory.oxarticles__oxid.value }}"
                                   data-accessoire-amount="1"
                                   data-accessoire-title="{{ oArticleAccessory.oxarticles__oxtitle.value }}"
                                   data-accessoire-artnum="{{ oArticleAccessory.oxarticles__oxartnum.value }}"
                                   data-accessoire-unit="{{ sAccessoireUnitName }}"
                                   data-accessoire-price="{# js #}"
                                   data-accessoire-formatted-price="{# js #}"
                                   data-accessoire-link="{{ oArticleAccessory.getLink() }}"
                                   disabled
                                />
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </table>
            <button id="c4sAddAccessoiresToBasket"
                class="btn btn-secondary c4s-smaller-button"
                type="button"
                disabled>{{ translate({ ident: "C4S_UPSELLING_ADD_ACCESOIRES" }) }}
            </button>
        </div>
        <div class="d-none alert alert-success c4s-accessory-loaded-info">
            {{ translate({ ident: "C4S_UPSELLING_ACCESSOIRES_ADDED" }) }}
        </div>
    </div>
</div>