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

{% block members_content %}

    <div class="membersContentWrap">

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

        {% if success %}
            <div class="alert alertGreen">
                <p>{{ success }}</p>
            </div>
        {% endif %}

        <section class="assessmentSection">
            <h2>In Progress</h2>

            {% if drafts | length < 1 %}
                <p>You have no assessments in progress.</p>
            {% else %}
                <ul class="recentOrders">
                    {% for draft in drafts %}
                        <li>
                            <div class="innerorderWrap">

                                <header class="orderHeader">
                                    <h5 class="orderTitle">
                                        <span class="orderID">{{ draft.form_name }}</span>
                                    </h5>
                                </header>

                                <div class="orderContent">
                                    <div class="orderDetails">
                                        <div class="row">
                                            <span class="orderLabel">Last updated: </span>{{ draft.updated_at }}
                                        </div>
                                        <div class="row">
                                            <span class="orderLabel">Expires: </span>{{ draft.expires_at }}
                                        </div>
                                    </div>
                                </div>

                                <footer class="orderFooter">
                                    <div class="buttonWrapper">
                                        <a href="{{ draft.resume_url }}" class="button">Continue</a>
                                        <a href="{{ draft.delete_url }}" class="button buttonOutlined"
                                           onclick="event.preventDefault(); if(confirm('Are you sure you want to delete this draft?')) { var f=document.createElement('form'); f.method='POST'; f.action=this.href; document.body.appendChild(f); f.submit(); }">
                                            Delete
                                        </a>
                                    </div>
                                </footer>

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

        <section class="assessmentSection" style="margin-top: 40px;">
            <h2>Completed Assessments</h2>

            {% if completed | length < 1 %}
                <p>You have no completed assessments.</p>
            {% else %}
                <ul class="recentOrders">
                    {% for assessment in completed %}
                        <li>
                            <div class="innerorderWrap">

                                <header class="orderHeader">
                                    <h5 class="orderTitle">
                                        <span class="orderID">{{ assessment.form_name }}</span>
                                    </h5>
                                </header>

                                <div class="orderContent">
                                    <div class="orderDetails">
                                        <div class="row">
                                            <span class="orderLabel">Completed: </span>{{ assessment.completed_at }}
                                        </div>
                                    </div>
                                </div>

                                <footer class="orderFooter">
                                    <div class="buttonWrapper">
                                        <a href="{{ assessment.review_url }}" class="button">Review</a>
                                    </div>
                                </footer>

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

    </div>

{% endblock %}
