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

{% block members_content %}

    <div class="membersContentWrap">

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


        {% if subscriptions is empty %}
            You have no subscriptions.
            
        {% else %}

            <ul class="recentOrders">
                
                {% for subscription in subscriptions %}
                    
                    <li>

                        <div class="innerorderWrap">

                            <header class="orderHeader">

                                <h5 class="orderTitle">
                                    <span class="orderID">
                                         Ref: SUB-{{ '%05d' | format(subscription.id) }}
                                    </span>
                                </h5>

                            </header>

                            <div class="orderContent">
                                
                                <div class="orderDetails">

                                    {% if subscription.hasFailedPayment()  %}
                                        <div class="error">
                                            <p>Failed payment</p>
                                        </div> <!-- .error -->
                                    {% endif %}
                                    
                                    {% if subscription.items is not empty %}
                                        <div class="row wysiwyg subscriptionsArea">

                                            <span class="orderLabel">Subscriptions: </span>

                                            <ol class="subscriptionList">
                                                {% for subscription_item in subscription.items %}
                                                    <li>
                                                        {{ subscription_item.getDisplayName() }}
                                                    </li>
                                                {% endfor %}
                                            </ol>

                                        </div> <!-- .row -->
                                    {% endif %}

                                    <div class="row">
                                        <span class="orderLabel">Status: </span> {{ subscription.status | upper }}
                                    </div> <!-- .row -->

                                </div>

                            </div> <!-- .orderContent -->

                            <footer class="orderFooter">

                                <div class="buttonWrapper">

                                    {% if subscription.hasFailedPayment()  %}
                                        <a 
                                                href="/shop/checkout/basket_overview.php?order_id={{ subscription.getLatestFailedPayment().id }}" 
                                                class="button buttonGreen"
                                        >Pay</a>
                                    {% else %}
                                        {% if subscription.can_be_paused %}
                                            {% if subscription.isActive() %}
                                                <a 
                                                        href="{{ route('fe-subscription-set-paused', [ subscription.id ] ) }}" 
                                                        class="button"
                                                >Pause</a>
                                            {% elseif subscription.isPaused() %}
                                                <a 
                                                        href="{{ route('fe-subscription-set-active', [ subscription.id ] ) }}" 
                                                        class="button buttonGreen"
                                                >Activate</a>
                                            {% endif %}
                                        {% endif %}
                                    {% endif %}

                                    {% if not subscription.isCancelled() %}
                                        <a 
                                                href="{{ route('fe-subscription-set-cancelled', [ subscription.id ] ) }}" 
                                                class="button buttonRed" 
                                                onclick="return confirm('Are you sure you want to cancel your subscription?')"
                                        >Cancel</a>
                                        {% if subscription.edit_url %}
                                            <a 
                                                    href="{{ subscription.edit_url }}" 
                                                    class="button"
                                            >Edit</a>
                                        {% endif %}
                                    {% endif %}

                                    {% if subscription.isCancelled() %}
                                        <a
                                                href="#disabled"
                                                class="button"
                                                disabled="disabled"
                                        >Cancelled</a>
                                    {% endif %}


                                </div> <!-- .buttonWrapper -->

                            </footer>

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

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

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

{% endblock %}
