{% extends ('layouts/fullscreen.twig') %}

{% block sidebar %}

    <div class="innerSidebar navigationSidebarWrap">

        <div class="sidebarIntro">

            <h1 class="assessmentTitle">Online Doctor</h1>
            <p>
                Thank you for completing our online assessment.
                Based on your answers, we can now recommend the following medications.
            </p>

            <p>
                Please select the medication you would like to buy.
            </p>

        </div> <!-- .sidebarIntro -->


        <nav class="sidebarPageNav">

            <ul>

                <li>

                    <a
                            href="#"
                            class=""
                    >
                        <h4>Online Consultation</h4>
                        <h6>Let's find out which medication is best for you.</h6>
                    </a>
                </li>
                <li>

                    <a
                            href="#"
                            class="active"
                    >
                        <h4>Medication</h4>
                        <h6>Select from the list of recommended medication(s).</h6>
                    </a>
                </li>
                <li>

                    <a
                            href="#"
                            class=""
                    >
                        <h4>Checkout</h4>
                        <h6>Purchase your medication.</h6>
                    </a>
                </li>

            </ul>

        </nav> <!-- .sidebarPageNav -->

    </div> <!-- .innerSidebar -->

{% endblock %}

{% block content %}


    <div class="sidebarNavPage fullscreenPage">

            <div class="pages">

                <section class="page">

                    <div class="pageHeading">

                        <div class="innerPageHeader">

                            <h2>
                                <span class="sectionTitle">Select your medication</span>
                            </h2>

                            <p>Please select the recommended medication from the list below.</p>
                        </div> <!-- .innerPageHeader -->

                    </div> <!-- .pageHeading -->

                    <div class="productListContent">

                        {% if items | length > 0 %}

                            <div class="fullscreenItems">

                                <div class="wrapper">

                                    <ul class="itemsBrowse landingItemsFullscreen">

                                        {% for item in items %}

                                            {% include 'shop/item/small.twig' with {
                                                item: item,
                                                external_image: true,
                                                show_footer: true,
                                                class: 'itemFullscreen',
                                                hide_description: true,
                                            } %}

                                        {% endfor %}

                                    </ul>

                                </div><!-- .wrapper -->

                            </div><!-- .landingItemsWrap -->

                        {% else %}

                        <p>Unfortunately we couldn't find a suitable treatment.</p>
                        <p>Please get in touch if you would like to discuss other available options.</p>

                        {% endif %}

                    </div><!-- .innerPageContent -->

                </section>

            </div> <!-- .pages -->

    </div> <!-- .nhsPrescriptionsWrapper -->


{% endblock %}
