<script setup>
import { ref } from 'vue';
import { getDateTime } from '@Controllers/DateController';

import Header     from '@Holos/Modal/Elements/Header.vue';
import ShowModal  from '@Holos/Modal/Show.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Eventos */
defineEmits([
    'close', 
]);

/** Propiedades */
const model = ref(null);

/** Referencias */
const modalRef = ref(null);

/** Métodos */
function close() {
    model.value = null;

    emit('close');
}

/** Exposiciones */
defineExpose({
    open: (data) => {
        model.value = data;
        modalRef.value.open();
    }
});
</script>
<template>
    <ShowModal
        ref="modalRef"
        @close="close"
    >
        <div v-if="model">
            <Header
                :title="model.event"
            />
            <div class="flex w-full p-4">
                <GoogleIcon
                    class="text-xl text-success"
                    name="contact_mail"
                />
                <div class="pl-3 w-full">
                    <p class="font-bold text-lg leading-none pb-2">
                        {{ $t('details') }}
                    </p>
                    <div class="text-sm">
                        <h4 class="font-semibold">{{ $t('event') }}:</h4>
                        <p>{{ model.event }}</p>
                    </div>
                    <div class="text-sm">
                        <h4 class="font-semibold">{{ $t('description') }}:</h4>
                        <p>{{ model.description }}</p>
                    </div>
                    <div class="flex w-full flex-col">
                        <p class="font-semibold">
                            {{ $t('changes') }}:
                        </p>
                        <div class="w-full text-xs p-2 border rounded-md">
                            <pre>{{ model.data }}</pre>
                        </div>
                    </div>
                    <div class="text-sm">
                        <h4 class="font-semibold">{{ $t('created_at') }}:</h4>
                        <p>{{ getDateTime(model.created_at) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </ShowModal>
</template>