<template>
    <v-card tile flat :height="cardHeight" :width="width" outlined :color="color + ' darken-2'">

        <v-card-title class="pa-1">
            <span class="text-caption white--text">
                {{  __('Status :name', {name: user.full_name}) }}
            </span>

            <v-spacer></v-spacer>

            <cs-user-status-menu 
                :user="user"
                @click:update-status="$emit('click:update-status', $event)"
            />
        </v-card-title>

        <v-sheet :height="cardHeight - 30" class="overflow-y-auto overflow-x-hidden d-flex justify-center align-center text-center text-caption">

            <div v-if="! user.activated_at" class="red--text">
                {{  __('Cont neactivat')  }}
            </div>
            
            <div v-else class="green--text">
                {{  __('Cont activat la :data', {data: ToDateTime(user.activated_at) })  }}
            </div>

        </v-sheet>
        
    </v-card>
</template>

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

            width: {default: 320},
            height: {default: null},
        },

        computed: {
            color() {
                return this.user.activated_at ? 'green' : 'red';
            },

            cardHeight() {
                return this.height ? this.height :  this.width/1.618033;
            },
        },
        
        name: 'CsUserStatus',
    }
</script>