<template>
    <v-card tile flat :height="cardHeight" :width="width" outlined :color="color + ' darken-2'">
        <v-card-title class="px-1 pt-1 pb-0">
            <span class="text-caption white--text">
                {{  __('Status :name', {name: user.full_name}) }}
            </span>

            <v-spacer></v-spacer>

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

        <v-card-title class="px-1 pt-0 pb-1" v-if="customer.id">
            <v-sheet width="100%" class="transparent text-truncate text-caption white--text">
                {{ customer.name }} <span v-if="$env == 'local'">#{{ customer.id }}</span>
            </v-sheet>
        </v-card-title>
        
        <v-sheet :height="cardHeight ? cardHeight - 50 : null" class="overflow-y-auto overflow-x-hidden d-flex justify-center align-center text-center text-caption">
            
            <div v-if="! account.activated_at" class="red--text">
                {{  __('Cont neactivat')  }}
            </div>
            
            <div v-else class="green--text">
                {{  __('Cont activat la :data', {data: ToDateTime(account.activated_at) })  }}
            </div>
        </v-sheet>

    </v-card>
</template>

<script>

    export default {
        props: {
            user: {required: true},
            role: {required: true},
            customer: {required: true},
            account: {required: true},

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

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


            cardHeight() {
                if( ! this.customer.id )
                {
                    return null;
                }
                return this.height ? this.height :  this.width/1.618033;
            },

            
        },

        name: 'CsCustomerAccountStatus'
    }
</script>