<template>
    <v-card
        tile
        flat
        class="mb-2"
        v-if="activeRecord"
    >   
        <v-card-title class="py-2">
            <span class="text-body-1">
                {{ __('Utilizator :user. Client: :customer', {
                    user: activeRecord.user.full_name,
                    customer: activeRecord.customer.name,
                })}}
            </span>
        </v-card-title>

        <v-card-text>
            <v-row dense >
                <v-col cols="12">
                    <v-autocomplete
                        dense
                        hide-details
                        class="mt-2"
                        :items="roles"
                        outlined
                        :label="__('Rolul')"
                        v-model="activeRecord.role_id"
                    >
                    </v-autocomplete>
                </v-col>

                <v-col cols="12">
                    <cs-info-alert 
                        color="red"
                        icon="mdi-alert"
                        :message="__('Sunteți sigur că doriți :action utilizatorului :user?', {
                            user: activeRecord.user.full_name,
                            action: activeRecord.activated == 1 ? 'deactivarea' : 'activarea'
                        })"
                    />
                </v-col>
            </v-row>
        </v-card-text>
    </v-card>
</template>

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

        computed: {
            form() {
                return this.editable.form;
            },

            roles() {
                return this.editable.column.datatable.app.dataSession.Roles.selectorItems;
            }
        },

        components: {
            CsInfoAlert: require('@CsVueComp/sheets/CsInfoAlert').default,
        },
        
        mixins: [
            require('@CsVueMix/Forminput/Forminput')
        ],

        name: 'AccountStatusInput',
    }
</script>