<template>
    <cs-centered-alert
        v-if="! controller.isBooted"
        :height="controller.height"
        :width="controller.width"
        :message="__('Se încarcă...', null, app.translations)"
    >
        <v-progress-circular
            indeterminate
            color="orange darken-1"
        >
        </v-progress-circular>
    </cs-centered-alert>

    <v-card
        v-else
        tile
        flat
        :width="controller.width"
        :height="controller.height"
        :disabled="disabled || controller.isPageDisabled"
    >
        <v-card
            tile
            flat
            :width="controller.width"
            :height="controller.height"
        >
            <v-card-title 
                v-if="controller.title" 
                class="pa-0 primary--text text--darken-3" 
            >
                {{ __(controller.title) }}
            </v-card-title>

            <v-card-title class="pa-0">
                <v-breadcrumbs 
                    v-if="controller.hasBreadcrumbs"
                    :items="controller.breadcrumbs" 
                    class="pa-0"
                >
                    <template v-slot:divider>
                        <v-icon>mdi-dots-vertical</v-icon>
                    </template>
                </v-breadcrumbs>

                <v-spacer></v-spacer>

                <slot name="append-breadcrumbs"></slot>

                <cs-quick-search 
                    v-if="controller.hasQuickSearch"
                    :dataprovider="controller.dataprovider"
                />

                <v-chip small outlined>
                    {{controller.recordsCount}}
                </v-chip>
            </v-card-title>

            <cs-toolbar 
                v-if="controller.hasToolbar" 
                :toolbar="controller.toolbar"
            >
                <cs-pagination 
                    v-if="controller.hasPagination"
                    :dataprovider="controller.dataprovider" 
                    :width="null"
                    htmlClass="mr-0 ml-auto"
                />
            </cs-toolbar>

            <component
                :is="controller.component"
                :app="app"
                :width="controller.width"
                :height="controller.contentHeight"
                :controller="controller"
            />
        </v-card>

        <slot name="prepend">
        </slot>
    </v-card>
</template>

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

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

        name: 'IndexPage',
    }
</script>