<patient-details :patient-data="patient"
                 :routes="routes"
                 inline-template
>
    <div>
        <div class="cardTitle">
            <h3>
                Basic details
            </h3>
            <div class="actions">
                <a :href="routes['edit-patient']">
                    <i class="fa fa-pencil"
                       title="Edit details"
                    ></i>
                </a>
            </div>
        </div>
        <table class="detailsTable" v-if="patient.id">
            <tr>
                <td>
                    ID
                </td>
                <td v-html="patient.id"></td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <span v-html="patient.address_billing.firstname"></span>
                    <span v-html="patient.address_billing.lastname"></span>
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    <a :href="'mailto:' + patient.email" v-html="patient.email"></a>
                </td>
            </tr>
            <tr>
                <td>
                    Phone
                </td>
                <td v-html="patient.contact_no"></td>
            </tr>
            <tr>
                <td>
                    Gender
                </td>
                <td v-html="patient.gender"></td>
            </tr>
            <tr>
                <td>
                    Date of birth
                </td>
                <td>
                    <span v-html="patient.dob"></span>
                    (age: <span v-html="patient.age"></span>)
                </td>
            </tr>
            <tr>
                <td>
                    Height
                </td>
                <td>
                    <span v-html="patient.height"></span>
                    cm
                </td>
            </tr>
            <tr>
                <td>
                    Weight
                </td>
                <td>
                    <span v-html="patient.weight"></span> kg
                    <span class="smallText">
                        <span v-if="patient.progress.reduction > 0"
                              class="red"
                        >
                            (+<span v-html="patient.progress.reduction"></span>)
                        </span>
                        <span v-else-if="patient.progress.reduction < 0"
                              class="green"
                        >
                            (<span v-html="patient.progress.reduction"></span>)
                        </span>
                        <span v-else
                              class="grey"
                        >
                            (+/- 0)
                        </span>
                    </span>
                </td>
            </tr>
            <tr>
                <td>
                    BMI
                </td>
                <td v-html="patient.bmi"></td>
            </tr>
            <tr :class="{
                'green': patient.passed_id_check,
                'red': !patient.passed_id_check,
            }">
                <td>
                    ID check passed
                </td>
                <td>
                    <span v-if="patient.passed_id_check">
                        Yes
                    </span>
                    <span v-else>
                        No
                    </span>
                </td>
            </tr>
        </table>
        <div v-if="showingMore">
            <template v-if="patient.doctor_surgery !== null">
                <h4>
                    Doctor surgery
                </h4>
                <table class="detailsTable">
                    <tr>
                        <td>
                            Practice Name
                        </td>
                        <td>
                            <span v-html="patient.doctor_surgery.practice_name"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            City
                        </td>
                        <td>
                            <span v-html="patient.doctor_surgery.city"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Address
                        </td>
                        <td>
                            <span v-html="patient.doctor_surgery.address_1"></span>,
                            <span v-html="patient.doctor_surgery.address_2"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Postcode
                        </td>
                        <td>
                            <span v-html="patient.doctor_surgery.postcode"></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Phone
                        </td>
                        <td>
                            <span v-html="patient.doctor_surgery.phone"></span>
                        </td>
                    </tr>
                </table>
            </template>
            <h4>
                Billing Address
            </h4>
            <table class="detailsTable">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <span v-html="patient.address_billing.firstname"></span>
                        <span v-html="patient.address_billing.lastname"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        Address 1
                    </td>
                    <td v-html="patient.address_billing.address1"></td>
                </tr>
                <tr>
                    <td>
                        City
                    </td>
                    <td v-html="patient.address_billing.city"></td>
                </tr>
                <tr>
                    <td>
                        Country
                    </td>
                    <td v-html="patient.address_billing.country"></td>
                </tr>
                <tr>
                    <td>
                        Postcode
                    </td>
                    <td v-html="patient.address_billing.postcode"></td>
                </tr>
            </table>
            <h4>
                Shipping Address
            </h4>
            <table class="detailsTable">
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        <span v-html="patient.address_shipping.firstname"></span>
                        <span v-html="patient.address_shipping.lastname"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                        Address 1
                    </td>
                    <td v-html="patient.address_shipping.address1"></td>
                </tr>
                <tr>
                    <td>
                        City
                    </td>
                    <td v-html="patient.address_shipping.city"></td>
                </tr>
                <tr>
                    <td>
                        Country
                    </td>
                    <td v-html="patient.address_shipping.country"></td>
                </tr>
                <tr>
                    <td>
                        Postcode
                    </td>
                    <td v-html="patient.address_shipping.postcode"></td>
                </tr>
            </table>
        </div>
        <div class="loadMore">
            <a href="#" @click.prevent="showMore">
                <span v-if="showingMore">
                    Show less...
                </span>
                <span v-else>
                    Show more...
                </span>
            </a>
        </div>
    </div>
</patient-details>