<template>
    <div>
        <div id="app-panel">
            <HeaderForm :textHeader='textHeader' :icoHeader='icoHeader'></HeaderForm>
            <div>
                <div class="table-borderless" style="border-style: none;">
                    <DisplayErrors :errorList="v$.$errors"></DisplayErrors>
                    <table class="table table-bordered table-sm" style="border:none;">
                        <tbody>
                            <slot></slot>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col d-flex justify-content-end" style="margin-top: 20px;margin-bottom: 20px;">
                    <button class="btn btn-primary btn-sm" id="btn_save" type="button" style="width: 80px;margin-right: 10px;margin-left: 10px;background: #769b76;border-color: #dddddd;" @click="$emit('click:save')">Save</button>
                    <CancelButton></CancelButton>
                </div>
            </div>
        </div>
        <Modal title='Save Task' :text='modalTextSave'   @close='closeModal' @cancel="closeModal" :modalActive="showModalSave" :showOkButton="showOkSaveButton" :backgroundColor="colorBackgroundModalSave" :showLoad="showLoadModalSave"></Modal>
        <Modal title='Confirm Quit' text='There are unsaved changes, do you want to continue?' @close='cancelQuit' @cancel="cancelQuit" :modalActive="showModalConfirm" showConfirmButton="true" showCloseButton="true" @confirm='confirmQuit' backgroundColor="colorBackgroundModalWarning" confirmButtonText='Quit'></Modal>
    </div>
</template>
<script lang="ts">
import HeaderForm from '@/lib-components/component/HeaderForm.vue';
import DisplayErrors from '@/lib-components/component/DisplayErrors.vue';
import CancelButton from '@/lib-components/component/CancelButton.vue';
import Modal from '@/lib-components/component/Modal.vue';
import useVuelidate from '@vuelidate/core'
export default{
    setup () {
        return { v$: useVuelidate() }
    },
    name: "Form",
    components:{
        HeaderForm,
        DisplayErrors,
        CancelButton,
        Modal
    },
    props:{
        textHeader: { type: String, default: '' },
        icoHeader: { type: String, default: '' },
    }
}
</script>