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

{% block head %}
    {{ parent() }}
    <script id="patient-profile-bootstrap" type="application/json">
        {{ profileBootstrap|json_encode(constant('JSON_HEX_TAG') b-or constant('JSON_HEX_AMP') b-or constant('JSON_HEX_APOS') b-or constant('JSON_HEX_QUOT'))|raw }}
    </script>
{% endblock %}

{% block content %}

    <ul class="breadcrumbs el">
        <li>
            <a href="/admin/">Admin</a> /
        </li>
        <li>
            <a href="{{ route('admin-patients') }}">List of patients</a> /
        </li>
        <li class="end">
            Patient Profile
        </li>
    </ul>

    <h1>{{ title }}</h1>

    <div class="js-vue-environment">
        <patient-profile :patient-data="{{ patient|json_encode }}"
                         :routes="{{ routes|json_encode }}"
                         :events="events"
                         inline-template
        >
            <div class="patientProfile">
                <ul class="tabnav el">
                    <li>
                        <a href="{{ route('admin-patients') }}">
                            Manage
                        </a>
                    </li>
                    <li>
                        <a href="/modules/Members/admin/manage_member.php">
                            Add
                        </a>
                    </li>
                    <li v-for="(tab, tabName) in tabs"
                        class="vueTab"
                        :class="{'active': tabName === activeTab}"
                        v-html="tab.name"
                        @click="setTab(tabName)"
                    ></li>
                </ul>
                <!-- Profile tab -->

                <div v-if="activeTab === 'profile'">
                    <div>
                        <div class="card">
                            {% include 'admin/patients/includes/patientOrders.twig'  with {} %}   {# orders is ready immediately #}
                        </div>
                    </div>

                    <div>
                        <div class="cardColumn">
                            <div class="card" v-if="ready.details">
                                {% include 'admin/patients/includes/patientDetails.twig' with {} %}
                            </div>
                            <div class="card" v-if="ready.treatmentPlan">
                                {% include 'admin/patients/includes/patientTreatmentPlan.twig'  with {}  %}
                            </div>
                            <div class="card" v-if="ready.subscriptions">
                                {% include 'admin/patients/includes/patientSubscriptions.twig'  with {}  %}
                            </div>
                            <div class="card" v-if="ready.attributes">
                                <h3>Medical card</h3>
                                {% include 'admin/patients/includes/patientAttributes.twig' with {} %}
                            </div>
                            <div class="card" v-if="ready.files">
                                {% include 'admin/patients/includes/patientFiles.twig' with {} %}
                            </div>
                            <div class="card" v-if="ready.consultations">
                                {% include 'admin/patients/includes/patientConsultations.twig' with {} %}
                            </div>
                        </div>

                        <div class="cardColumn">
                            <div class="card" v-if="ready.flags">
                                {% include 'admin/patients/includes/patientFlags.twig' with {}  %}
                            </div>
                            <div class="card" v-if="ready.notes">
                                {% include 'admin/patients/includes/patientNotes.twig' with {} %}
                            </div>
                            <div class="card" v-if="ready.reviews">
                                {% include 'admin/patients/includes/patientReviews.twig' with {}  %}
                            </div>
                            <div class="card" v-if="ready.messages">
                                {% include 'admin/patients/includes/patientMessages.twig' with {}  %}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Track tab -->

                <div v-else-if="activeTab === 'track'">
                    <div class="cardColumn">
                        <div class="card" v-if="ready.weight">
                            {% include 'admin/patients/includes/patientWeightTrack.twig' with {}  %}
                        </div>
                        <div class="card" v-if="ready.bp">
                            {% include 'admin/patients/includes/patientBpTrack.twig' %}
                        </div>
                    </div>
                    <div class="cardColumn">
                        <div class="card" v-if="ready.eventlog">
                            {% include 'admin/patients/includes/patientEventLog.twig' %}
                        </div>
                    </div>
                </div>
                {% include 'admin/patients/includes/addPatientNote.twig' %}
                {% include 'admin/patients/includes/editPatientTreatment.twig' %}
                {# Stash the builder off-screen so it’s never visible on the page #}
                <div class="overlay-stash">
                    {% include 'admin/basketBuilder/includes/builder.twig' %}
                </div>
                {% include 'admin/reviews/includes/editReview.twig' %}
            </div>
        </patient-profile>
    </div>
{% endblock %}
