<template>
    <v-card
        :color="userrole.role.color"
        outlined
        :width="width"
    >
        <v-sheet 
            class="pa-1 text-caption"
        >
            <div class="text-body-2 font-weight-bold" :style="{color: userrole.role.color}">
                {{ userrole.role.name }}
            </div>

            <template v-if="userrole.role.type == 'b2b'">
                <div v-if="userrole.customer">
                    {{ userrole.customer.name }}
                </div>

                <div v-else class="red--text">   
                    {{ __('Rolul nu este legat de un client.') }}
                </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>
            </template>
        </v-sheet>

    </v-card>
</template>

<script>
    export default {
        props: {
            userrole: {required: true},
            activation: {required: true},
            width: {default: 360},
        },

        computed: {
            isActivated() {
                return this.activation && (this.activation.activated == 1) && this.activation.activated_at;
            }
        },
        
        components: {
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },

        name: 'UserRolesListItem',
    }
</script>