<template>
    <div v-if="showDialog" class="modal">
        <div class="modal-content">
            <span class="close" @click="closeDialog">&times;</span>
            <h2>Link hinzufügen</h2>
            <table>
                <tbody>
                    <tr>
                        <td>
                            <label for="link-url">URL:</label>
                        </td>
                        <td>
                            <input id="link-url" v-model="url" type="text" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="link-text">Linktext:</label>
                        </td>
                        <td>
                            <input id="link-text" v-model="text" type="text" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <button @click="confirm">Hinzufügen</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AddLinkDialog',
    data() {
        return {
            showDialog: false,
            url: '',
            text: '',
        };
    },
    methods: {
        openAddLinkDialog() {
            this.showDialog = true;
        },
        closeDialog() {
            this.showDialog = false;
            this.url = '';
            this.text = '';
        },
        confirm() {
            this.$emit('confirm', this.url, this.text);
            this.closeDialog();
        },
    },
};
</script>

<style scoped>
.modal {
    display: flex;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>