<template>
    <v-card tile flat :width="controller.width" :height="controller.height">

        <v-card-title 
            class="pa-0 primary--text text--darken-3" 
            v-html="__('Dashboard utilizator :name', {name:controller.user.full_name})">
        </v-card-title>

        <v-breadcrumbs 
            :items="controller.breadcrumbs" 
            class="pa-0 mb-2"
        >
            <template v-slot:divider>
                <v-icon>mdi-dots-vertical</v-icon>
            </template>
        </v-breadcrumbs>

        <v-card tile flat :width="controller.width" :height="controller.height - 61" class="d-flex">
    
            <v-sheet :height="controller.height - 69" :width="user_panel_width" class="pa-2">

                <user-profile-form :app="app" :user="controller.user" class="mb-2" />

                <user-profile :app="app" :user="controller.user" />

            </v-sheet>

            <v-sheet :height="controller.height - 61" :width="'calc(100% - ' + user_panel_width + 'px)'" class="pa-2">
                <user-dashboard-items 
                    v-if="! customer"
                    :app="app"
                    :user="controller.user"
                    :height="controller.height - 79"
                />

                <account-dashboard-items 
                    v-else
                    :app="app"
                    :user="controller.user"
                    :height="controller.height - 79"
                    :customer="customer"
                />
            </v-sheet>
        </v-card>
    </v-card>
</template>

<script>
    export default {
            
        props: {
            app: {required: true},
            controller: {required: true},
            user_panel_width: {default: 320},
        },

        computed: {
            customer() {
                return this.app.dataSession.Customers.customer;
            }
        },

        name: 'UserDashboardPage',
        
    }
</script>