<template>
    <DialogWidget ref="dialog" title="contact.title" :isTitleTranslated="true" icon="contact24.png" :show-close="true"
        :buttons="[{ text: 'Ok', action: 'save' }, { text: 'Cancel', action: 'close' }]" :modal="false" @save="save"
        :width="'50em'">
        <table>
            <tr>
                <td>{{ $t("dialog.contact.email") }}</td>
                <td><input type="email" v-model="email" /></td>
            </tr>
            <tr>
                <td>{{ $t("dialog.contact.name") }}</td>
                <td><input type="text" v-model="name" /></td>
            </tr>
        </table>
        <p>{{ $t("dialog.contact.message") }}</p>
        <textarea v-model="message" rows="15" cols="80"></textarea>
        <p>{{ $t("dialog.contact.accept") }}</p>
        <label><input type="checkbox" v-model="acceptDataSave" />{{ $t("dialog.contact.acceptdatasave") }}</label>
        <p>{{ $t("dialog.contact.accept2") }}</p>
        <p v-if="error" class="error">{{ $t("dialog.contact.error." + error) }}</p>
    </DialogWidget>
</template>

<script>
import DialogWidget from '../../components/DialogWidget.vue';
import apiClient from '@/utils/axios.js';

export default {
    name: 'ContactDialog',
    components: {
        DialogWidget
    },
    data() {
        return {
            email: "",
            name: "",
            message: "",
            acceptDataSave: false,
            error: ""
        };
    },
    methods: {
        open() {
            this.email = "";
            this.name = "";
            this.message = "";
            this.acceptDataSave = false;
            this.error = "";
            this.$refs.dialog.open();
        },
        async save() {
            try {
                const response = await apiClient.post('/api/contact', {
                    email: this.email,
                    name: this.name,
                    message: this.message,
                    acceptDataSave: this.acceptDataSave
                });
                this.$refs.dialog.close();
            } catch (error) {
                this.error = error;
            }
        }
    }
};
</script>

<style scoped>
p {
    margin: 0px;
}

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

a:hover {
    text-decoration: underline;
}

table,
tr,
td {
    margin: 0;
    padding: 0;
}

.error {
    color: red;
}
</style>
