<template>
    <v-card
        flat
        :color="role.color"
        rounded
        outlined
        @click.stop="OnClickRole"
    >
        <v-sheet
            rounded
            class="transparent pa-1 white--text"
        >
            <div class="font-weight-bold d-flex justify-space-between align-center">
                <div>
                    {{role.name}} ({{role.slug}}) 
                </div>
                <div v-if="isActive">
                    <v-icon class="white--text">
                        mdi-check
                    </v-icon>
                </div>
            </div>
            
            <div class="text-body-2">
                {{app.config.platforms[role.type]}}
            </div>
        </v-sheet>
    </v-card>
</template>

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

        computed: {
            activeRecord() {
                return this.app.classes.Controller.activeRecord;
            },

            isActive() {
                return !! this.activeRecord && (this.activeRecord.id == this.role.id);
            },
        },

        methods: {

            OnClickRole() {
                this.app.classes.Controller.SetActiveRecord(this.role);                
            }
        },

        name: 'RoleItem',
    }
</script>