<template>
    <DialogWidget
        ref="dialog"
        title="dataPrivacy.title"
        isTitleTranslated=true
        icon="privacy24.png"
        :show-close="true"
        :buttons="[{ text: 'Ok' }]"
        :modal="false"
        @close="closeDialog"
        @ok="handleOk"
    >
        <div v-html="dataPrivacyContent"></div>
    </DialogWidget>
</template>

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

export default {
    name: 'DataPrivacyDialog',
    components: {
        DialogWidget
    },
    data() {
        return {
            dataPrivacyContent: content.dataPrivacy[this.$i18n.locale]
        };
    },
    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>
