<template>
    <v-card tile flat class="pa-2" 
        :class="{
            'orange lighten-4': isActive,
        }"
        @click="OnClickUserItem"
        @contextmenu="OnRightClick"
    >
        <v-sheet class="transparent text-caption d-flex align-center justify-space-between">
            <user-avatar :user="user" />

            <v-sheet class="transparent pl-1 text-left text-truncate" width="calc(100% - 115px)">
                {{  user.full_name }}
            </v-sheet>
            
            <v-sheet width="85" class="transparent text-right">
                {{  app.config.platforms[user.type]  }}
            </v-sheet>
        </v-sheet>

        <v-sheet class="transparent text-caption d-flex justify-end">
            <v-chip small :color="!! user.email_verified_at ? 'green' : 'red'" outlined>
                <span v-if="! user.email_verified_at">
                    {{  __('Email neverificat') }}
                </span>
                <span v-else>
                    {{  __('Email verificat la :data', {data: ToDateTime(user.email_verified_at) }) }}
                </span>

            </v-chip>

        </v-sheet>

        
    </v-card>

</template>

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

        computed: {
            isActive() {
                return !! this.Utilizatori.Users.active && (this.Utilizatori.Users.active.id == this.user.id)
            }
        },

        methods: {
            OnRightClick(e) {
                this.Utilizatori.Rightmenus.Show('Useritemright', e);
                setTimeout( () => {
                    this.Utilizatori.Users.active = this.user;
                }, 100)
            },

            OnClickUserItem() {
                this.Utilizatori.Users.active = this.user;
            }
        },

        name: 'UsersListItem',
    }
</script>