<template>
    <cs-basic-card
        v-if="form.visible"
        :style="form.htmlStyle"
        :outlined="outlined"
        elevation="20"
    >
        <v-sheet
            tile
            :height="form.absoluteHeight - 108"
            class="overflow-y-auto"
        >
            <v-card-text>
                <slot></slot>
            </v-card-text>
        </v-sheet>

        <v-divider></v-divider>

        <template #actions>
            <cs-btn 
                outlined
                position="bottom"
                icon="mdi-filter-outline"
                color="orange"
                caption="Filtrează"
                tooltip="Filtrează după criteriile selectate"

                :loading="false"
                :disabled="! form.isFiltered"

                :click="() => form.Filter()"
            />

            <v-spacer></v-spacer>

            <cs-btn-cancel 
                position="top"
                @keypresstab="OnKeyPressTab"
                :icon="null"
                :form="null"
                :click="() => form.Hide()"
            />
        </template>
    </cs-basic-card>
</template>

<script>

    /**
     *         <template #title
            v-if="form.Caption()"
        >
            <span>
                {{ __(form.Caption()) }}
            </span>
        </template>

        <template #titleright v-if="false">
            <cs-btn-cancel 
                :form="null"
                :click="() => form.Hide()"
                :caption="null"
                position="bottom"
                :outlined="false"
            />
        </template>

        <v-divider></v-divider>
     */
    export default {
        props: {
            form: {required: true},
            outlined: {default: true},
        },

        methods: {
            OnKeyPressTab(e) {
                if( ! e.shiftKey )
                {
                    e.preventDefault();
                    this.$slots.default[this.$slots.default.length - 1].componentInstance.Focus();
                }
            }
        },

        components: {
            CsBasicCard: require('./CsBasicCard').default,
            CsImage: require('./../images/CsImage').default,
            CsBtn: require('./../buttons//CsBtn').default,
            CsBtnCancel: require('./../buttons//CsBtnCancel').default,
        },
        
        name: 'CsFilterFormCard',
    }
</script>