<script setup>
    import { computed } from 'vue';

    const props = defineProps({
        vehicle: {
            type: Object,
            required: false
        }
    });

    defineEmits(['reset-vehicle']);

    const title = computed(() => {
        return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
    });
</script>

<template>
    <div class="modal fade" id="createVehicleModal" tabindex="-1" role="dialog" aria-labelledby="createVehicleModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="title mt-2 mb-3">{{ title }}</h2>
                    <button 
                        id="btnClosecreateVehicleModal" 
                        type="button" 
                        @click="$emit('reset-vehicle')"
                        class="close bg-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body form-content">
                </div>
                <div class="modal-footer">
                    <button 
                        type="button" 
                        class="btn btn-dark" 
                        @click="$emit('reset-vehicle')"
                        data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>

</style>