<template>
    <v-card tile flat :width="width" class="pr-1">
        
        <v-card tile flat outlined>

            <v-card-title class="px-1 pt-1 pb-0 align-center">
                {{  __('Utilizatori') }}

                <v-spacer></v-spacer>

                <v-sheet width="55%">
                    <v-text-field 
                        :placeholder="__('Căutare') + '...'" 
                        class="text-caption" clearable dense hide-details append-icon="mdi-magnify"     
                        v-model="Utilizatori.Users.searchText"
                    >
                    </v-text-field>
                </v-sheet>
            </v-card-title>

            <v-card-title class="px-1 py-2 text-caption">
                <v-sheet>
                    <v-radio-group
                        dense
                        hide-details
                        outlined
                        class="ma-0 pa-0"
                        v-model="Utilizatori.Users.userType"
                        row
                    >
                        <v-radio
                            v-for="(option, index) in platforms"
                            :key="'option-' + index"
                            :value="index"
                            :label="option"
                        >
                            <template #label>
                                <span class="text-caption">{{ option }}</span>
                            </template>
                        </v-radio>
                        
                    </v-radio-group>
                </v-sheet>
            </v-card-title>

            <v-divider></v-divider>

            <v-sheet :height="app.height - 124" class="overflow-y-auto">

                <users-list :app="app" :items="app.dataSession.Users.items" />


            </v-sheet>

            
            
        </v-card>
    </v-card>
</template>

<script>

    export default {
        props: {
            app: {required: true},
            width: {default: null},
        },

        computed: {

            platforms() {
                return {
                    'all': 'Toți',
                    ...this.app.config.platforms,
                };
            }
        },

        name: 'UserDesktop',
    }

</script>