<template>
    <v-card
        tile
        flat
        :outlined="dashboardPage.outlined"
        :height="dashboardPage.height"
        :width="isEmailVerified ? 400 : dashboardPage.width"
        :color="dashboardPage.color"
        class="mx-auto d-flex"
        :class="{
            'align-center': isEmailVerified,
            'align-start': ! isEmailVerified, 
        }"
    >

        <verified-thank-you 
            v-if="isEmailVerified"
            :app="app"
        />

        <div v-else-if="false">
            <div>
                Ai ajuns pe dahboard [ADMIN]  platforma <strong>{{app.platform}}</strong>.
            </div>

            <div>
                Esti {{app.user.full_name}}. Contul tau este: <strong>{{app.user.active ? 'activat' : 'neactivat'}}</strong>
            </div>

            <div>
                Ai asociate {{app.user.roles.length}} roluri: 
                {
                <div
                    class="pa-2"
                    v-for="(role, index) in app.user.roles"
                    :key="'role-' + index"
                >
                    {{role}}
                </div>
                <div>
                    Rolul pe aceasta platforma este: <strong>{{app.user.role ? app.user.role.name : '-'}}</strong>
                </div>
            </div>

            <div>
                Ai asociați {{ app.user.customers.length}} clienți: 
                <span 
                    v-for="(customer, index) in app.user.customers"
                    :key="'customer-' + index"
                    class="pr-3"
                >
                    {{customer.name}}
                </span>
            </div>
        </div>
    </v-card>
</template>

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

        computed: {
            dashboardPage() {
                return this.app.classes.Dashboardpage;
            },

            isEmailVerified() {
                return _.has(this.app.payload, 'verified') && (this.app.payload.verified == 1)
            }
        },

        components: {
            VerifiedThankYou: require('./Verified/VerifiedThankYou').default,
        },

        name: 'DashboardPage',
    }
</script>