<template>
    <v-sheet class="d-flex text-caption align-center" width="100%">
        <v-sheet width="24px">
            <user-avatar 
                :user="item.user"
                :size="24"
            />
        </v-sheet>

        <v-sheet width="calc(100% - 236px)" class="pl-1">
            {{item.user.full_name}}
        </v-sheet>

        <v-sheet width="100px" class="text-truncate">
            {{item.department ? item.department.departament : '-'}}
        </v-sheet>

        <v-sheet width="42px">
            <user-active 
                :user="item.user"
                :app="null"
                :form="null"
            />
        </v-sheet>

        <v-sheet width="70px" class="pl-1">
            <user-role 
                :role="item.role"
                :app="null"
                :form="null"
            />
        </v-sheet>
    </v-sheet>
</template>

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

        name: 'AccountAutocompleteItem',

    }
</script>