<template>
    <v-card
        tile
        flat
        :height="app.height"
        :width="app.width"
    >  
        <v-card-title class="px-0 py-1">
            <image-icon 
                :src="app.url + 'imgs/blue-icons/person.png'"
            />
            {{ __('Profilul meu') }}
        </v-card-title>
       
        <v-sheet
            :width="app.width"
            :height="app.height - 44"
            class="d-flex justify-start align-start"
        >
            <v-sheet>
                <profile-page-user 
                    :app="app"
                    :user="app.user"
                    class="mx-1 mb-2"
                />

                <user-all-roles 
                    v-if="false"
                    :app="app"
                    :user="app.user"
                    :customers="customers"
                    :customerpersons="customerpersons"
                    :usercustomers="usercustomers"
                    class="mx-1"
                />
            </v-sheet>
            
            <v-sheet class="mx-1">
                <profile-page-user-settings 
                    :app="app"
                    :user="app.user"
                    class="mb-3"
                />
            </v-sheet>
            
        </v-sheet> 
    </v-card>
</template>

<script>

    export default {
        props: {
            app: {required: true},
        },

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

            customerpersons() {
                return this.app.dataSession.Customerpersons.items;
            },

            usercustomers() {
                return this.app.dataSession.Usercustomers.items;
            },
        },

        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
        },

        mixins: [
            require('./../mixins/myprofile.mixin'),
        ],

        name: 'MyProfilePage',
    }
</script>