{% block page_account_order_item_detail_overview %}
    <div class="order-item-detail">
        <div class="collapse"
             id="order{{ order.orderNumber }}">
            <div class="order-detail-content">

                {% block page_account_order_documents_table %}
                    <div class="order-detail-content-body">
                        {% sw_include '@Storefront/storefront/page/account/order-history/order-detail-document.html.twig' %}
                    </div>
                {% endblock %}

                {% block page_account_order_item_detail_table_header %}
                    <div class="order-detail-content-header">
                        <div class="row">
                            {% block page_account_order_item_detail_table_header_name %}
                                <div class="col-6 order-detail-content-header-cell order-header-name">
                                    {{ "account.orderItemColumnName"|trans|sw_sanitize }}
                                </div>
                            {% endblock %}

                            {% block page_account_order_item_detail_table_header_quantity %}
                                <div class="col-2 order-detail-content-header-cell order-header-quantity">
                                    {{ "account.orderItemColumnQuantity"|trans|sw_sanitize }}
                                </div>
                            {% endblock %}

                            {% block page_account_order_item_detail_table_header_price %}
                                <div class="col-2 order-detail-content-header-cell order-header-price">
                                    {{ "account.orderItemColumnPrice"|trans|sw_sanitize }}
                                </div>
                            {% endblock %}

                            {% block page_account_order_item_detail_table_header_total %}
                                <div class="col-2 order-detail-content-header-cell order-header-total">
                                    {{ "account.orderItemColumnTotal"|trans|sw_sanitize }}
                                </div>
                            {% endblock %}
                        </div>
                    </div>
                {% endblock %}

                {% block page_account_order_item_detail_table_body %}
                    <div class="order-detail-content-body">
                        {% sw_include '@Storefront/storefront/page/account/order-history/order-detail-list.html.twig' %}
                    </div>
                {% endblock %}

                {% if order.customerComment %}
                    {% block page_account_order_item_detail_table_body_customer_comment %}
                        <div class="order-detail-content-body">
                            <div class="row order-detail-content-row">
                                {% block page_account_order_customer_comment_header %}
                                    <div class="col-12 card-title">
                                        {{ "checkout.customerCommentHeader"|trans|sw_sanitize }}
                                    </div>
                                {% endblock %}

                                {% block page_account_order_customer_comment_content %}
                                    <div class="col-12">{{ order.customerComment|sw_sanitize|nl2br }}</div>
                                {% endblock %}
                            </div>
                        </div>
                    {% endblock %}
                {% endif %}

                {% block page_account_order_item_detail_table_footer %}
                    <div class="order-detail-content-footer">
                        {% block page_account_order_item_detail_table_labels_summary %}
                            <div class="order-item-detail-footer">
                                <div class="row g-0">
                                    <div class="col-12 col-md-7 col-xl-6">
                                        <dl class="row g-0 order-item-detail-labels">
                                            {% block page_account_order_item_detail_date %}
                                                {% block page_account_order_item_detail_date_label %}
                                                    <dt class="col-6 col-md-5">{{ "account.orderItemDate"|trans|sw_sanitize }}</dt>
                                                {% endblock %}

                                                {% block page_account_order_item_detail_date_value %}
                                                    <dd class="col-6 col-md-7 order-item-detail-labels-value">{{ order.orderDateTime|format_date('short', locale=app.request.locale) }}</dd>
                                                {% endblock %}
                                            {% endblock %}

                                            {% block page_account_order_item_detail_number %}
                                                {% block page_account_order_item_detail_number_label %}
                                                    <dt class="col-6 col-md-5">{{ "account.orderItemNumber"|trans|sw_sanitize }}</dt>
                                                {% endblock %}

                                                {% block page_account_order_item_detail_number_value %}
                                                    <dd class="col-6 col-md-7 order-item-detail-labels-value">{{ order.orderNumber }}</dd>
                                                {% endblock %}
                                            {% endblock %}

                                            {% block page_account_order_item_detail_payment_method %}
                                                {% if order.transactions|length > 0 %}
                                                    {% block page_account_order_item_detail_payment_method_label %}
                                                        <dt class="col-6 col-md-5">{{ "account.orderItemPaymentMethod"|trans|sw_sanitize }}</dt>
                                                    {% endblock %}

                                                    {% block page_account_order_item_detail_payment_method_value %}
                                                        <dd class="col-6 col-md-7 order-item-detail-labels-value">
                                                            {{ order.transactions|last.paymentMethod.translated.name }}
                                                        </dd>
                                                    {% endblock %}
                                                {% endif %}
                                            {% endblock %}

                                            {% block page_account_order_item_detail_shipping_method %}
                                                {% if order.deliveries|length > 0 %}
                                                    {% block page_account_order_item_detail_shipping_method_label %}
                                                        <dt class="col-6 col-md-5">{{ "account.orderItemShippingMethod"|trans|sw_sanitize }}</dt>
                                                    {% endblock %}

                                                    {% block page_account_order_item_detail_shipping_method_value %}
                                                        <dd class="col-6 col-md-7 order-item-detail-labels-value">
                                                            {{ order.deliveries|first.shippingMethod.translated.name }}
                                                        </dd>
                                                    {% endblock %}
                                                {% endif %}
                                            {% endblock %}

                                            {% block page_account_order_item_detail_tracking_code %}
                                                {% if order.deliveries|length > 0 %}
                                                    {% block page_account_order_item_detail_tracking_code_label %}
                                                        <dt class="col-6 col-md-5">{{ "account.orderItemTracking"|trans|sw_sanitize }}</dt>
                                                    {% endblock %}

                                                    {% block page_account_order_item_detail_tracking_code_label_value %}
                                                        {% apply spaceless %}
                                                            <dd class="col-6 col-md-7">
                                                                {% set totalOutput = 0 %}

                                                                {% for delivery in order.deliveries %}
                                                                    {% set trackingCodes = delivery.trackingCodes %}
                                                                    {% set trackingUrl = delivery.shippingMethod.translated.trackingUrl %}

                                                                    {% for trackingCode in trackingCodes %}
                                                                        {% if trackingUrl %}
                                                                            {% set output %}
                                                                                <a href="{{ trackingUrl|format(trackingCode) }}" target="_blank" rel="noopener">{{ trackingCode }}</a>
                                                                            {% endset %}
                                                                        {% else %}
                                                                            {% set output %}
                                                                                <span>{{ trackingCode }}</span>
                                                                            {% endset %}
                                                                        {% endif %}

                                                                        {% set totalOutput = totalOutput + 1 %}

                                                                        {% if totalOutput > 1 %}<span>, </span>{% endif %}{{ output }}
                                                                    {% endfor %}
                                                                {% endfor %}
                                                            </dd>
                                                        {% endapply %}
                                                    {% endblock %}
                                                {% endif %}
                                            {% endblock %}
                                        </dl>
                                    </div>

                                    <div class="col-12 col-md-5 col-xl-6">
                                        {% block page_account_order_item_detail_summary %}
                                            <dl class="row g-0 order-item-detail-summary">
                                                {% block page_account_order_item_detail_shipping_costs %}
                                                    {% if order.deliveries|length > 0 %}
                                                        {% block page_account_order_item_detail_shipping_costs_label %}
                                                            <dt class="col-6 col-md-8">{{ "account.orderItemShippingcosts"|trans|sw_sanitize }}</dt>
                                                        {% endblock %}

                                                        {% block page_account_order_item_detail_shipping_costs_value %}
                                                            <dd class="col-6 col-md-4">{{ order.shippingTotal|currency(order.currency.isoCode) }}</dd>
                                                        {% endblock %}
                                                    {% endif %}
                                                {% endblock %}

                                                {% block page_account_order_item_detail_amount %}
                                                    {% block page_account_order_item_detail_amount_label %}
                                                        <dt class="col-6 col-md-8">
                                                            {% if order.isTaxFree %}
                                                                {{ "account.orderItemNetTotal"|trans|sw_sanitize }}
                                                            {% else %}
                                                                {{ "account.orderItemTotal"|trans|sw_sanitize }}
                                                            {% endif %}
                                                        </dt>
                                                    {% endblock %}

                                                    {% block page_account_order_item_detail_amount_value %}
                                                        <dd class="col-6 col-md-4">
                                                            {% if order.isTaxFree %}
                                                                {{ order.amountNet|currency(order.currency.isoCode) }}
                                                            {% else %}
                                                                {{ order.amountTotal|currency(order.currency.isoCode) }}
                                                            {% endif %}
                                                        </dd>
                                                    {% endblock %}
                                                {% endblock %}
                                            </dl>
                                        {% endblock %}
                                    </div>
                                </div>
                            </div>
                        {% endblock %}

                        {% block page_account_order_item_detail_table_footnote %}
                            <div class="order-item-detail-footnote">
                                {{ "footer.%s"|format(order.taxStatus == "gross" ? "includeVatText" : "excludeVatText")|trans({
                                    '%url%': path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') })
                                })|raw }}
                            </div>
                        {% endblock %}
                    </div>
                {% endblock %}
            </div>
        </div>
    </div>
{% endblock %}
