<template>
    <v-card tile flat outlined>
        <v-card-title class="pa-1 blue darken-4 white--text">
            <user-avatar :user="user" />
            <span class="pl-1">
                {{  user.full_name }}
            </span>
            <v-spacer></v-spacer>
            {{  app.config.platforms[user.type]  }}
        </v-card-title>

        <v-card-text class="pa-1">
            
            <v-chip small outlined v-for="(item, index) in infos" :key="'info-' + index" class="mr-1 mb-1">
                <span>{{ __(item.caption) }}</span>:
                <span class="font-weight-medium pl-1">{{ item.render(user) }}</span>
            </v-chip>

        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="pa-1">
            <user-roles-list :app="app" :roles="user.roles"/>
        </v-card-text>

    </v-card>
</template>

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

        computed: {
            infos() {
                return [
                    {
                        caption: '#ID',
                        render: user => user.id,
                    },

                    {
                        caption: 'Knolyx #ID',
                        render: user => user.k_id || '-',
                    },

                    {
                        caption: 'Email',
                        render: user => user.email,
                    },

                    {
                        caption: 'Nume',
                        render: user => user.last_name,
                    },

                    {
                        caption: 'Prenume',
                        render: user => user.first_name,
                    },

                    {
                        caption: 'Telefon',
                        render: user => user.phone || '-',
                    }
                ];
            }
        },

        name: 'UserTableRecord',
    }
</script>