<template>
    <DialogWidget ref="dialog" title="socialnetwork.gallery.show_image_dialog.title" icon="image16.png"
        :show-close="true" :buttons="buttons" :modal="true" :isTitleTranslated="true" @close="closeDialog"
        name="ImageDialog">
        <div>
            <div class="image-container">
                <img :src="image.url" alt="Image" :style="{ maxWidth: '600px', maxHeight: '600px' }" />
            </div>
            <div class="form-group">
                <label for="imageTitle">{{ $t('socialnetwork.gallery.imagedialog.image_title') }} <span type="text">{{
                        imageTitle }}</span></label>
            </div>
        </div>
    </DialogWidget>
</template>

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

export default {
    name: "ShowImageDialog",
    components: {
        DialogWidget,
    },
    data() {
        return {
            image: null,
            imageTitle: '',
        };
    },
    computed: {
        buttons() {
            return [
                { text: this.$t('socialnetwork.gallery.imagedialog.close'), action: this.closeDialog }
            ];
        },
    },
    methods: {
        open(image) {
            this.image = image;
            this.imageTitle = image.title;
            this.$refs.dialog.open();
        },
        closeDialog() {
            this.$refs.dialog.close();
        },
    },
};
</script>

<style scoped>
.form-group {
    margin-bottom: 15px;
}

.image-container {
    text-align: center;
    margin-bottom: 20px;
}

.multiselect {
    display: inline-block;
    width: auto;
}
</style>
