{% extends 'layout.html.twig' %}

{% set seo_title = 'Order History' %}

{% block content %}
    <div class="container">
        <div class="breadcrumbs">
            <div class="breadcrumbs-item">
                <a href="{{ path('account_index') }}" class="breadcrumbs-link">Account</a>
            </div>
        </div>

        <h1>Order History</h1>

        <p>Below is a complete record of your orders placed with Texstyle. Please click the 'View' button for more detailed order information.</p>

        {% if orders is empty %}
            <div class="account-no-orders">
                <a href="{{ path('order_index') }}" class="btn btn-primary">Place your first order</a>
            </div>
        {% else %}
            <table class="order-history">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Confirmation No.</th>
                        <th>Order Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for order in orders %}
                        <tr class="order-history-item">
                            <td>
                                <div class="order-history-heading">Date</div>
                                {{ order.orderDate|date('d.m.y') }}
                            </td>
                            <td>
                                <div class="order-history-heading">Confirmation No.</div>
                                {{ order.orderNumber }}
                            </td>
                            <td>
                                <div class="order-history-heading">Order Status</div>
                                {% if order.orderStatus == 'new' %}
                                    <div class="status status-danger">
                                        <div class="status-indicator"></div>
                                        <div class="status-description">Awaiting Shipment</div>
                                    </div>
                                {% elseif order.orderStatus == 'partial_shipped' %}
                                    <div class="status status-warning">
                                        <div class="status-indicator"></div>
                                        <div class="status-description">Partially Shipped</div>
                                    </div>
                                {% elseif order.orderStatus == 'complete' %}
                                    <div class="status status-active">
                                        <div class="status-indicator"></div>
                                        <div class="status-description">Shipped</div>
                                    </div>
                                {% else %}
                                    <div class="status status-danger">
                                        <div class="status-indicator"></div>
                                        <div class="status-description">Unknown</div>
                                    </div>
                                {% endif %}
                            </td>
                            <td class="order-history-view">
                                <a href="{{ path('account_order', {'hash': order.hash}) }}" class="btn btn-primary btn-sm">View</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endblock %}