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

{% capture append = "oxidBlock_content" %}
    {% set oOrders = oView.getOrderList() %}

    {% block account_order_history %}
        {% if count(oOrders) > 0 %}
            {% set oArticleList = oView.getOrderArticleList() %}
            <ol class="list-unstyled">
                {% for oOrder in oOrders %}
                    <li>
                        <div class="panel panel-account-order">  {# TODO : REFACTORING PANEL > CARD! #}
                            <div class="panel-heading collapsed" role="tab" data-bs-toggle="collapse" data-bs-target="c4s-account-order-body-{{ oOrder.oxorder__oxordernr.value }}">
                                <div class="row">
                                    <div class="col-10 col-sm-11">
                                        <table class="table table-responsive">
                                            <thead>
                                                <tr>
                                                    <th class="account-order-head-key">
                                                        <strong>{{ translate({ ident: "ORDER_ORDERDATE", suffix: "COLON" }) }}</strong>
                                                    </th>
                                                    <th class="d-none d-sm-block account-order-head-key">
                                                        <strong>{{ translate({ ident: "ORDER_NUMBER", suffix: "COLON" }) }}</strong>
                                                    </th>
                                                    <th class="account-order-head-key">
                                                        <strong>{{ translate({ ident: "SHIPMENT_TO", suffix: "COLON" }) }}</strong>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="account-order-head-value">
                                                        <div id="accOrderDate_{{ oOrder.oxorder__oxordernr.value }}">
                                                            {{ oOrder.oxorder__oxorderdate.value|date_format("%d.%m.%Y") }} {{ oOrder.oxorder__oxorderdate.value|date_format("%H, %M, %S") }}
                                                        </div>
                                                    </td>
                                                    <td class="d-none d-sm-block account-order-head-value">
                                                        <div id="accOrderNo_{{ oOrder.oxorder__oxordernr.value }}">
                                                            {{ oOrder.oxorder__oxordernr.value }}
                                                        </div>
                                                    </td>
                                                    <td class="account-order-head-value">
                                                        <div id="accOrderName_{{ oOrder.oxorder__oxordernr.value }}">
                                                            {% if oOrder.oxorder__oxdellname.value %}
                                                                {{ oOrder.oxorder__oxdelfname.value }}
                                                                {{ oOrder.oxorder__oxdellname.value }}
                                                            {% else %}
                                                                {{ oOrder.oxorder__oxbillfname.value }}
                                                                {{ oOrder.oxorder__oxbilllname.value }}
                                                            {% endif %}
                                                            {% if oOrder.getShipmentTrackingUrl() %}
                                                                &nbsp;|&nbsp;<strong>{{ translate({ ident: "TRACKING_ID" }) }}</strong>
                                                                <span id="accOrderTrack_{{ oOrder.oxorder__oxordernr.value }}">
                                                                    <a href="{{ oOrder.getShipmentTrackingUrl() }}">{{ translate({ ident: "TRACK_SHIPMENT" }) }}</a>
                                                                </span>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="col-2 col-sm-1 account-order-head-button">
                                        <i class="fa-solid fa-chevron-down panel-collapsed"></i><i class="fa-solid fa-chevron-up panel-open"></i>
                                    </div>
                                </div>
                            </div>
                            <div id="c4s-account-order-body-{{ oOrder.oxorder__oxordernr.value }}" class="panel-body panel-collapse collapse" role="tabpanel">
                                <table class="table table-responsive table-striped table-hover c4s-account-order-table">
                                    <thead>
                                        <tr>
                                            <th>{{ translate({ ident: "C4S_ARTICLE_AMOUNT" }) }}</th>
                                            <th>{{ translate({ ident: "C4S_ARTICLE_DESCRIPTION" }) }}</th>
                                            <th class="d-none d-sm-block">{{ translate({ ident: "C4S_ARTNUM" }) }}</th>
                                            <th class="d-none d-md-block c4s-table-manufacturer-nr">{{ translate({ ident: "C4S_ARTICLE_MANUFACTURER_NR" }) }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for oOrderArticle in oOrder.getOrderArticles(true) %}
                                            {% set sArticleId = oOrderArticle.oxorderarticles__oxartid.value %}
                                            {% set oArticle = oArticleList[sArticleId] %}
                                            <tr>
                                                <td>
                                                    {% if oOrderArticle.oxorderarticles__oxamount.value %}
                                                        {{ oOrderArticle.oxorderarticles__oxamount.value }} {{ translate({ ident: "QNT" }) }}
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    {% if oOrderArticle.oxorderarticles__oxtitle.value %}
                                                        {% if oArticle.oxarticles__oxid.value and oArticle.isVisible() %}
                                                            <a id="accOrderLink_{{ oOrder.oxorder__oxordernr.value }}_{{ loop.index }}" href="{{ oArticle.getLink()|raw }}">
                                                        {% endif %}
                                                        {{ oOrderArticle.oxorderarticles__oxtitle.value }} {% if oOrderArticle.oxorderarticles__oxselvariant.value %}{{ oOrderArticle.oxorderarticles__oxselvariant.value }}{% endif %} <span class="amount"></span>
                                                        {% if oArticle.oxarticles__oxid.value and oArticle.isVisible() %}
                                                            </a>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                                <td class="d-none d-sm-block">
                                                    {% if oOrderArticle.oxorderarticles__oxartnum.value %}
                                                        {% if oArticle.oxarticles__oxid.value and oArticle.isVisible() %}
                                                            <a id="accOrderLink_{{ oOrder.oxorder__oxordernr.value }}_{{ loop.index }}" href="{{ oArticle.getLink()|raw }}">
                                                        {% endif %}
                                                        {{ oOrderArticle.oxorderarticles__oxartnum.value }}
                                                        {% if oArticle.oxarticles__oxid.value and oArticle.isVisible() %}
                                                            </a>
                                                        {% endif %}
                                                    {% endif %}
                                                </td>
                                                <td class="d-none d-sm-table-cell c4s-table-manufacturer-nr">
                                                    {% if oArticle.oxarticles__oxmpn.value %}
                                                        {{ oArticle.oxarticles__oxmpn.value }}
                                                    {% endif %}
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </li>
                {% endfor %}
            </ol>
            {% include "widget/locator/listlocator.html.twig" with {oPageLocator: oView.getPageNavigation(), sPosition: "bottom"} %}
        {% else %}
            {{ translate({ ident: "ORDER_EMPTY_HISTORY" }) }}
        {% endif %}
    {% endblock %}
    {{ insert_tracker({title: template_title}) }}
{% endcapture %}

{% capture append = "oxidBlock_sidebar" %}
    {% include "page/account/inc/account_menu.html.twig" with {active_link: "orderhistory"} %}
{% endcapture %}

{% include "layout/page.html.twig" with {sidebar: "left", blHideBreadcrumb: true} %}