{% 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 option 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 option you would like to buy.</p>
                        </div> <!-- .innerPageHeader -->

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

                    <div class="productListContent">

                        {% if go_back_url %}
                            <div class="row">
                                <a href="{{ go_back_url }}" class="button">Go back</a>
                            </div>
                        {% endif %}

                        <div class="fullscreenItems">

                            <div class="wrapper">

                                <ul class="itemsBrowse landingItemsFullscreen">

                                    {% for option_card in option_cards %}

                                        {% include 'shop/item/small_option.twig' with {
                                            option_card: option_card,
                                        } %}

                                    {% endfor %}

                                </ul>

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

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

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

                </section>

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

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


{% endblock %}
