<template>
    <v-card
        color="grey lighten-3"
        outlined
        :width="width"
    >
        <v-sheet 
            class="pa-1 text-caption"
        >
            <div class="text-body-2 font-weight-bold">
                {{ account.customer.name }}
            </div>

            <div v-if="account.department">
                {{ account.department.departament }}
            </div>

            <div v-else class="red--text">   
                {{ __('Contul nu este legat de un departament.') }}
            </div>

            <div v-if="isActivated">
                {{ __('Cont activat la data :d', {d: ToDateTime(activation.activated_at ) }) }}
            </div>

            <div v-else class="red--text">   
                {{ __('Contul nu este activat.') }}
            </div>

            <div class="d-flex justify-space-between align-center">
                <account-role 
                    :role="account.role"
                    :form="null"
                    :app="null"
                />

                <cs-btn 
                    icon="mdi-chevron-right"
                    :tooltip="__('Setează contul pentru :name', {name: account.customer.name})"
                    @click="OnClickSettings"
                />
            </div>

        </v-sheet>

    </v-card>   
</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            account: {required: true},
            activation: {required: true},
            width: {default: 360},
        },

        computed: {
            isActivated() {
                return this.activation && (this.activation.activated == 1) && this.activation.activated_at;
            }
        },

        methods: {
            OnClickSettings() {
                let url = this.$url + 'utilizator-dashboard/accounts/' + this.account.user_id + '/' + this.account.customer_id;
                return Redirect(url);
            }
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'UserCustomersAccountsList',
    }
</script>