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

{% 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="{{ route('admin-patients-add') }}">
                            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>
                <div v-show="activeTab === 'profile'">
                    <div>
                        <div class="card">
                            {% include 'admin/patients/includes/patientOrders.twig' %}
                        </div>
                    </div>
                    <div>
                        <div class="cardColumn">
                            <div class="card">
                                {% include 'admin/patients/includes/patientDetails.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientTreatmentPlan.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientSubscriptions.twig' %}
                            </div>
                            <div class="card">
                                <h3>Medical card</h3>
                                {% include 'admin/patients/includes/patientAttributes.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientFiles.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientConsultations.twig' %}
                            </div>
                        </div>
                        <div class="cardColumn">
                            <div class="card">
                                {% include 'admin/patients/includes/patientFlags.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientNotes.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientReviews.twig' %}
                            </div>
                            <div class="card">
                                {% include 'admin/patients/includes/patientMessages.twig' %}
                            </div>
                        </div>
                    </div>
                </div>
                <div v-show="activeTab === 'track'">
                    <div class="cardColumn">
                        <div class="card">
                            {% include 'admin/patients/includes/patientWeightTrack.twig' %}
                        </div>
                        <div class="card">
                            {% include 'admin/patients/includes/patientBpTrack.twig' %}
                        </div>
                    </div>
                    <div class="cardColumn">
                        <div class="card">
                            {% include 'admin/patients/includes/patientEventLog.twig' %}
                        </div>
                    </div>
                </div>
                {% include 'admin/patients/includes/addPatientNote.twig' %}
                {% include 'admin/patients/includes/editPatientTreatment.twig' %}
                {% include 'admin/basketBuilder/includes/builder.twig' %}
                {% include 'admin/reviews/includes/editReview.twig' %}
            </div>
        </patient-profile>
    </div>
{% endblock %}