<template>
    <DialogWidget
        ref="dialog"
        title="imprint.title"
        :isTitleTranslated=true
        icon="imprint24.png"
        :show-close="true"
        :buttons="[{ text: 'Ok', action: 'close' }]"
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
        name="ImprintDialog"
    >
        <div v-html="sanitizedContent"></div>
    </DialogWidget>
</template>

<script>
import DialogWidget from '../../components/DialogWidget.vue';
import content from '../../content/content.js';
import DOMPurify from 'dompurify';

export default {
    name: 'ImprintDialog',
    components: {
        DialogWidget
    },
    data() {
        return {
            imprintContent: content.imprint[this.$i18n.locale]
        };
    },
    computed: {
        sanitizedContent() {
            return DOMPurify.sanitize(this.imprintContent);
        }
    },
    watch: {
        '$i18n.locale'(newLocale) {
            this.imprintContent = content.imprint[newLocale];
        }
    },
    methods: {
        open() {
            this.$refs.dialog.open();
        },
        closeDialog() {
            this.$refs.dialog.close();
        },
        handleOk() {
            this.closeDialog();
        }
    }
};
</script>

<style scoped>
p {
    margin-bottom: 10px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}
</style>
