{% import "@CoreShopFrontend/Common/Macro/currency.html.twig" as currency %}
{% extends '@CoreShopFrontend/layout-full.html.twig' %}

{% block center %}
    <div id="main-container" class="container p-0">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('coreshop_index') }}">{{ 'coreshop.ui.home'|trans }}</a></li>
                <li class="breadcrumb-item"><a href="{{ path('coreshop_customer_profile') }}">{{ 'coreshop.ui.profile'|trans }}</a></li>
                <li class="breadcrumb-item active">{{ 'coreshop.ui.orders'|trans }}</li>
            </ol>
        </nav>

        <h2 class="main-heading text-center">
            {{ 'coreshop.ui.orders'|trans }}
        </h2>

        <div class="table-responsive compare-table">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <td>{{ 'coreshop.ui.order_number'|trans }}</td>
                    <td>{{ 'coreshop.ui.date'|trans }}</td>
                    <td>{{ 'coreshop.ui.total'|trans }}</td>
                    <td>{{ 'coreshop.ui.state'|trans }}</td>
                    <td></td>
                </tr>
                </thead>
                <tbody>
                {% for order in orders %}
                <tr>
                    <td>{{ order.orderNumber }}</td>
                    <td>
                        {{ order.orderDate|date("d.m.Y") }}
                    </td>
                    <td>
                        {{ currency.format(order.convertedTotal, order.currency.isoCode) }}
                    </td>
                    <td>
                        <span class="badge badge-info">{{ order|coreshop_order_state.calculatedState }}</span>
                    </td>
                    <td>
                        {% if is_granted('CORESHOP_CUSTOMER_PROFILE_ORDER_DETAIL') %}
                            <a class="btn btn-secondary" href="{{ path('coreshop_customer_order_detail', {order: order.id}) }}">
                                {{ 'coreshop.ui.show_detail'|trans }}
                            </a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
