{% extends 'layouts/members.twig' %}

{% block members_content %}

    <div class="membersContentWrap">

        {% include 'includes/elements/intro_block.twig' with {
            intro_title: 'Orders',
            intro_content: false,
            class: 'membersIntro',
            use_h1: true
        }%}


        {% if member_orders | length < 1 %}
            <p>You have no past orders</p>
        {% else %}

        <ul class="recentOrders">
            {% for order in member_orders %}
                <li>

                    <div class="innerorderWrap">
                        
                        <header class="orderHeader">
                            
                            <h5 class="orderTitle">
                                <span class="orderID">
                                    Ref: {{ order.order_ref ?: '#' ~ order.id }}
                                    {{ (order.subscriptions | length > 0) ? '<span class="orderSubscriptionTag"><i class="fas fa-sync-alt"></i> Subscription</span>' | raw : '' }}
                                </span>

                                <span class="orderStatusBadge orderStatusBadge--{{ order.status }}">
                                    {{ order.getOrderStatusTitle() }}
                                </span>
                            </h5>
                            
                        </header>

                        <div class="orderContent">
                            
                            
                            <div class="orderDetails">
                                
                                {% if not order.paid %}
                                    <div class="orderPaymentAlert">
                                        <i class="fas fa-exclamation-triangle"></i>
                                        <div>
                                            <strong>Payment failed</strong>
                                            <span>Please retry your payment or update your payment method.</span>
                                        </div>
                                    </div>
                                {% endif %}
                                
                                <div class="row">
                                    <div class="orderDate">
                                        <span class="orderLabel">Date: </span>{{ order.date }}
                                    </div>
                                </div> <!-- .row -->

                                {% if order.subscriptions is not empty %}
                                    <div class="row wysiwyg subscriptionsArea">
                                        
                                        <span class="orderLabel">Subscriptions: </span>
    
                                        <ol class="subscriptionList">
                                            {% for sub in order.subscriptions %}
                                                <li>
                                                    SUB-{{ '%05d' | format(sub.id) }}
                                                    {% if sub.max_number_of_issues %}
                                                        (Issue {{ sub.getIssueNumber(order) }} of {{ sub.max_number_of_issues }})
                                                    {% else %}
                                                        (Issue {{ sub.getIssueNumber(order) }})
                                                    {% endif %}
                                                </li>
                                            {% endfor %}
                                        </ol>
                                        
                                    </div> <!-- .row -->
                                {% endif %}
                                
                                <div class="row wysiwyg orderListRow">

                                    <span class="orderLabel">Order: </span>
                                    
                                    <ol class="orderList">
                                        {% for item in order.items %}
                                            <li>
                                                {{ (item.item_name ~ '<br />' ~ (item.size|not_one_size))|raw }}
                                            </li>
                                        {% endfor %}
                                    </ol>
                                </div>
                                
                                <div class="row">
                                    <span class="orderLabel">Cost: </span> &pound;{{ order.cost_total|number_format(2) }}
                                </div> <!-- .row -->
                            </div>
                            
                        </div> <!-- .orderContent -->
                        
                        <footer class="orderFooter">

                            <div class="buttonWrapper">
                                <a href="{{ route('members-order', {'id' : order.id}, false) }}" class="button">View Order</a>

                                <a href="{{ route('members-reorder', {'id' : order.id}, false) }}" class="button">
                                    Re-Order
                                </a>
                                
                            </div> <!-- .buttonWrapper -->
                            
                        </footer>

                    </div> <!-- .innerorderWrap -->

                </li>
            {% endfor %}
        </ul>

        {% endif %}

    </div> <!-- .membersContentGrid -->

{% endblock %}
