<template>
    <v-tabs 
        :vertical="vertical"
        :height="tabheight"
        v-model="menu.value"
    >
        <v-tab
            v-for="(option, index) in menu.getOptions"
            :key="'option-' + index"
            class="text-no-transform"
        >
            <v-badge
                v-if="option.badge()"
                color="green"
                :content="option.badge()"
                inline
            >
                {{ option.caption }}
            </v-badge>

            <span v-else>
                {{ option.caption }}
            </span>
        </v-tab>

        <v-tab-item
            v-for="(option, index) in menu.getOptions"
            :key="'option-' + index"
        >
            <v-card tile flat class="pa-1">
                {{  option.component  }}
                <component 
                    :is="option.component"
                    :height="height - tabheight - 8"
                    :app="app"
                    :user="user"
                    :value="menu.value"
                    :account="account"
                >
                </component>
            </v-card>
        </v-tab-item>
    </v-tabs>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            user: {required: true},
            account: {required: true},
            menu: {required: true},
            vertical: {default: false},
            tabheight: {default: 48},
            height: {default: null},
        },

        name: 'UserDashboardTabs',
    }
</script>