<template>
    <v-card
        tile
        flat
        outlined
    >
        <v-card-title class="px-1 py-2">
            {{ __('Date Utilizator') }}
        </v-card-title>

        <v-card-text class="pa-1">
            <editable-text 
                :control="app.editableControls.Lastname"
                class="my-4"
            />

            <editable-text 
                :control="app.editableControls.Firstname"
                class="my-4"
            />

            <editable-text 
                :control="app.editableControls.Email"
                class="my-4"
            />

            <editable-text 
                :control="app.editableControls.Phone"
                class="my-4"
            />
            
        </v-card-text>
    </v-card>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            user: {required: true},
        },

        created() {
            this.app.editableControls.Firstname.InitValue(this.user.id, this.user.first_name);
            this.app.editableControls.Lastname.InitValue(this.user.id, this.user.last_name);
            this.app.editableControls.Email.InitValue(this.user.id, this.user.email);
            this.app.editableControls.Phone.InitValue(this.user.id, this.user.phone);
        },

        name: 'UserProfileForm',
    }
</script>