<template>
    <DialogWidget
        ref="dialog"
        title="dataPrivacy.title"
        :isTitleTranslated=true
        icon="privacy24.png"
        :show-close=true
        :buttons="[{ text: 'Ok', action: 'close' }]"
        :modal=false
        @close="closeDialog"
        @ok="handleOk"
        name="DataPrivacyDialog"
    >
        <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: 'DataPrivacyDialog',
    components: {
        DialogWidget
    },
    data() {
        return {
            dataPrivacyContent: content.dataPrivacy[this.$i18n.locale]
        };
    },
    computed: {
        sanitizedContent() {
            return DOMPurify.sanitize(this.dataPrivacyContent);
        }
    },
    watch: {
        '$i18n.locale'(newLocale) {
            this.dataPrivacyContent = content.dataPrivacy[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>
