<template>
    <div>
        <div class="card border-0 rounded-2">
            <div class="card-body">
                <div class="d-flex flex-nowrap align-items-center justify-content-between">
                    <h5 class="mb-3" v-if="$scopedSlots['main-title']">
                        <slot name="main-title"></slot>
                    </h5>
                    <div class="d-flex mb-3 ms-2"> 
                        <div class="d-flex" v-if="!noneActions">
                            <div v-if="newButton">
                                <template v-if="$can(permisName)">
                                    <button v-if="$can(permisName)" class="btn btn-success me-2 text-nowrap" data-bs-toggle="modal" @click="$emit('click',$event)">
                                        <i class="fa-solid fa-plus"></i> {{ $t('Add New') }}
                                    </button>
                                </template>
                                <template v-else>
                                    <button class="btn btn-success me-2 text-nowrap" data-bs-toggle="modal" @click="$emit('click',$event)"><i class="fa-solid fa-plus"></i> {{ $t('Add New') }}</button>
                                </template>
                            </div>
                            <div v-else>
                                <router-link v-if="$can(permisName)" :to="{ name: route }">
                                    <button class="btn btn-success me-2 text-nowrap"><i class="fa-solid fa-plus"></i>  {{ $t('Add New') }} </button>
                                </router-link>
                                <router-link v-else :to="{ name: route }">
                                    <button class="btn btn-success me-2 text-nowrap"><i class="fa-solid fa-plus"></i>  {{ $t('Add New') }} 
                                    </button>
                                </router-link>
                            </div>
                            <!-- searchInput / have paramator -->
                            <input v-if="!noneInput" type="search" class="rounded form-control"  @input="$emit('input',$event)" :placeholder="$t('Search')" autocomplete="off">
                       </div>
                        <template v-if="$scopedSlots['more-button']">
                            <slot name="more-button"></slot>
                        </template>
                    </div>
                </div>
                <!-- body content -->
                <template v-if="$scopedSlots['body']">
                    <slot name="body"></slot>
                </template>
            </div>
        </div>
        <template v-if="$scopedSlots['modal-custom']">
            <slot name="modal-custom"></slot>
        </template>
    </div>
</template>
<script>
    export default {
        props: {
            noneActions: false,
            newButton: false,
            route: '',
            permisName: '',
            noneInput: false,
            sortData:{},
            params:{}
        },
    
    };
</script>



