<script setup>
import { ref } from 'vue';
import { useDialogPluginComponent } from 'quasar';

const { dialogRef } = useDialogPluginComponent();

const closeButton = ref(null);

const $props = defineProps({
    htmlContent: {
        type: String,
        required: true,
    },
});
</script>

<template>
    <QDialog ref="dialogRef" full-width>
        <QCard class="dialog-width q-pa-lg">
            <QCardSection>
                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
                    <QIcon name="close" size="sm" />
                </span>
                <div v-html="$props.htmlContent" />
            </QCardSection>
        </QCard>
    </QDialog>
</template>

<style lang="scss" scoped>
.dialog-width {
    max-width: 900px !important;
}
</style>
