<template>
    <v-sheet
        :height="height"
        tile
        :width="width"
        class="overflow-x-auto overflow-y-hidden"
    >
        <div class="px-3">
            <cs-centered-alert 
                v-if="! activeUser"
                :height="height"
                message="Niciun un utilizator nu este selectat.<br/>Selectați un utilizator din lista."
            />

            <template v-else>
                <cs-toolbar 
                    :toolbar="toolbar"
                >
                    <v-chip>
                        {{ activeUser.customers.length  }}
                    </v-chip>
                </cs-toolbar>

                <cs-centered-alert 
                    v-if="activeUser.customers.length == 0"
                    :height="height"
                    :message="__('Utilizatorul :name nu are clienți asociați', {name: activeUser.full_name})"
                />
 
                <team-customers-items 
                    :app="app"
                    :height="height - 48"
                    :activeUser="activeUser"
                />
            </template>
        </div>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            height: {default: null},
            width: {default: null},
            activeUser: {required: true},
        },

        computed: {
            toolbar() {
                return this.app.menus.Teamcustomerstoolbar;
            }
        },

        components: {
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
            CsCenteredAlert: require('@CsVueComp/sheets/CsCenteredAlert').default,
        },

        name: 'TeamCustomersPage',
    }
</script>