<template>
    <v-chip small outlined :color="role.color" class="mr-1 mb-1">

        {{ role.name }} <span v-if="$env == 'local'">#{{ role.id }}</span>

        <template v-if="role.type == 'b2b'">

            <span v-if="role.pivot.customer_id" class="pl-1 font-weight-medium">
                {{  Utilizatori.Customers.customers[role.pivot.customer_id] }} <span v-if="$env == 'local'">#{{ role.pivot.customer_id }}</span>
            </span>
            
            <span class="pl-2" v-else>
                <cs-icon-tooltip 
                    message="Nu este asociat client la acest rol"
                />
            </span>

        </template>
    </v-chip>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            role: {required: true},
        },
        name: 'RoleItem'
    }
</script>