<template>
    <v-card
        tile
        flat
        :height="height"
        :width="width"
        :loading="app.dataSession.Customers.processing"
        class="overflow-y-auto px-2 overflow-x-hidden"
    >   
        <cs-centered-alert
            v-if="app.dataSession.Customers.request_count < 1"
            :height="height"
            :width="width"
            :message="null"
        >
            <div class="red--text font-body-2">
                {{ __('Se încarcă...', app.translations) }}
            </div>
        </cs-centered-alert>

        <cs-centered-alert
            v-else-if="customers.length == 0"
            :height="height"
            :width="width"
            :message="null"
        >
            <div class="red--text font-body-2">
                {{ __('Cursul nu a fost trimis niciunui utilizator') }}
            </div>
        </cs-centered-alert>

        <template v-else>
            <curs-access-customer-item 
                v-for="(customer, index) in customers"
                :key="'customer-' + index"
                :customer="customer"
                :app="app"
            />
        </template>

    </v-card>
</template>

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

        computed: {
            customers() {
                return this.app.classes.Accescurs.customers;
            }
        },

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

        name: 'CursAccessCustomers',
    }
</script>