<template>
    <v-layout column fill-height>
        <!-- <v-flex xs12> -->
            <v-card class="pa-1 mb-2">
                <v-card-text class="pa-0">
                    <v-layout row wrap>
                        <v-flex xs12>
                            <patient-search-box></patient-search-box>
                        </v-flex>
                    </v-layout>
                </v-card-text>
                
            </v-card>
        <!-- </v-flex> -->

        <!-- <v-flex xs12 grow> -->
            <v-card class="pa-1 p-left-side grow" grow>
                <v-card-text class="pa-0">
                    <v-layout row wrap>

                        <v-flex xs12>
                           <patient-detail></patient-detail>
                        </v-flex>
                        <v-divider></v-divider>
                        <v-flex xs12>
                           <patient-notes></patient-notes> 
                        </v-flex>
                    </v-layout>
                </v-card-text>

                
            </v-card>
    </v-layout>
    
</template>

<style scoped>
/* .p-left-side {
    min-height: 500px;
} */
</style>

<script>
module.exports = {
	components : {
        'patient-search-box' : httpVueLoader('./patientSearchBox.vue'),
        'patient-detail': httpVueLoader('./patientDetail.vue'),
        'patient-notes' : httpVueLoader('./patientNotes.vue')
	}	
}
</script>
