<template>
    <v-sheet
        outlined
        :color="role.color"
        rounded
    >
        <v-sheet class="pa-1 transparent white--text" rounded>
            <div class="font-weight-bold">
                {{role.name}} ({{role.slug}})
            </div>

            <div class="d-flex justify-space-between">
                <div>
                    {{ app.config.platforms[role.type] }}
                </div>

                <div v-if="customer">
                    {{customer.name}}
                </div>
            </div>
        </v-sheet>

    </v-sheet>
</template>

<script>
    export default {
        props: {
            role: {required: true},
            app: {required: true},
            customers: {required: true},
        },

        computed: {
            customer() {
                if(this.role.pivot.customer_id)
                {
                    return _.find(this.customers, item => item.id == this.role.pivot.customer_id);
                }
                return null;
            }
        },

        name: 'UserAllRolesItem',
    }
</script>