<div class="ctaTabs membersTabs {{ class }}">

    {% if no_wrapper is empty %}
    <div class="wrapper">
    {% endif %}

        <div class="ctaTabsWrap">


            <section>


                <div class="ctaTabsNav">

                    <ul>
                        <li v-for="(tabName, tab) in tabs">
                            <button
                                    type="button"
                                    v-html="tabName"
                                    :class="[tabName == currentlyVisibleID ? 'activeTab' : '']"
                                    @click.prevent="updateVisible(tabName)"
                            ></button>
                        </li>
                    </ul>

                    <div class="selectWrap row">

                        <div class="inputWrap">
                            <select
                                    v-model="currentlyVisibleID"
                                    class="no-chosen"
                                    v-select_tabs:reset_pages="currentlyVisibleID"
                                    v-model="currentlyVisibleID"
                            >
                                <option
                                        v-for="(tabName, tab) in tabs"
                                        v-html="tabName == 'All' ? 'All Orders' : tabName"
                                        :value="tabName"
                                        :selected="tabName == currentlyVisibleID"
                                ></option>
                            </select>
                        </div> <!-- .inputWrap -->

                    </div> <!-- .selectWrap -->

                </div> <!-- .categoryTabsNav -->

                <div class="tabContentWrapper">

                    {% for key, tab in order_tabs %}

                        <div class="ctaTabContent {% if loop.index == 1 %}showBox{% endif %}" :class="[currentlyVisibleID == '{{ key }}' ? 'showBox' : '']">

                            {% if tab['data'] is not empty %}

                                <div class="orderList {{ grid_class }}">

                                    <ul class="hideme" :class="loading ? 'hideme' : ''">
                                        {% for order in tab['data'] %}

                                            {% set item = order.items[0] %}

                                            {% if item is not empty %}
                                                <li v-if="!paginationEnabled || page == '{{ order.page }}'">
                                                    {% include 'members/orders/partials/order_box.twig' %}
                                                </li>
                                            {% endif %}

                                        {% endfor %}
                                    </ul>

                                </div> <!-- .innerCtaBoxes -->

                            {% else %}
                                <h4 class="emptyOrders">
                                    You currently have no orders.
                                </h4>
                            {% endif %}

                        </div> <!-- .categoryTabContent -->

                    {% endfor %}

                </div> <!-- .tabContentWrapper -->


                <div class="paginationWrap" v-if="paginationEnabled && totalPages > 1" v-cloak>

                    <ul class="pagination">

                        <li class="prev">
                            <a
                                    href="#"
                                    rel="prev"
                                    @click.prevent="prevPage()"
                                    :class="[page > 1 ? '' : 'pageButtonDisabled']"
                            >
                                Prev
                            </a>
                        </li>

                        <li v-for="index in totalPages" :key="index">
                            <a
                                    href="#"
                                    @click.prevent="gotoPage(index + 1)"
                                    v-html="index + 1"
                                    :class="[page == (index + 1) ? 'pageButtonDisabled' : '']"
                                    :data-page="page"
                                    :data-index="(index + 1)"
                            ></a>
                        </li>


                        </li>
                        <li class="next">
                            <a
                                    href="#"
                                    rel="next"
                                    @click.prevent="nextPage()"
                                    :class="[page < totalPages ? '' : 'pageButtonDisabled']"
                            >
                                Next
                            </a>
                        </li>
                    </ul>
                </div><!-- .paginationWrap -->

            </section>


        </div> <!-- .categoryTabsWrap -->

        {#
        <div class="orderFooterCta">

            <a href="/online-doctor" class="fullLink">

                <div class="iconWrapper">
                    <i class="fal fa-plus"></i>
                </div> <!-- .iconWrapper -->

                <div class="linkWrap">
                    Start a New order
                </div> <!-- .linkWrap -->
            </a>

        </div> <!-- .orderFooterCta -->
        #}

    {% if no_wrapper is empty %}
    </div> <!-- .wrapper -->
    {% endif %}

</div> <!-- .categoryTabs -->
