<template>
    <transition name="fade">
        <div class="imprint-modal d-flex h-100 w-100">
            <!--            <div v-if="contenttype === 'impressum'" class="overlay"></div>-->

            <div
                class="modal-body d-flex flex-grow-1 flex-column impressum text-white"
            >
                <h3 class="font-primary">
                    {{ getInterfaceText('menu_impressum') }}
                </h3>
                <div class="imprint-text-container">
                    <p class="imprint-content" v-html="content"></p>
                </div>
            </div>
            <div class="close-btn-wrap">
                <fugger-button
                    iconname="close-icon"
                    iconpos="right"
                    theme="dark"
                    type="menulink-btn"
                    @click="$emit('closemodal')"
                >
                    schließen
                </fugger-button>
            </div>
        </div>
    </transition>
</template>

<script>
import FuggerButton from './FuggerButton.vue'

export default {
    name: 'Modal',
    components: { FuggerButton },
    props: {
        content: {
            type: String,
            default: '',
        },
    },
}
</script>

<style lang="scss" scoped>
@import 'assets/scss/variables';
@import 'assets/scss/buttons';
@import 'assets/scss/global';

.imprint-modal {
    background-color: rgba(0, 0, 0, 0.4);
    pointer-events: all;
    position: absolute;
    display: block;
    z-index: 1111;

    .impressum {
        &.modal-body {
            margin: calc(60vw * var(--pxToVw));
            padding: calc(92vw * var(--pxToVw)) calc(122vw * var(--pxToVw))
                calc(175vw * var(--pxToVw)) calc(94vw * var(--pxToVw));
            background: #fff;
            .imprint-text-container {
                overflow: hidden auto;
                padding-right: calc(20vw * var(--pxToVw));
                .imprint-content {
                    color: #000;
                    column-count: 3;
                    column-gap: calc(85vw * var(--pxToVw));

                    h5 {
                        column-span: all;
                    }
                }
            }
        }
    }
}

.close {
    position: absolute;
    left: 0px;
    bottom: 100px;
}

.close-btn-wrap {
    pointer-events: all;
    position: absolute;
    left: 0px;
    z-index: 100;
    bottom: calc(60vw * var(--pxToVw));
}
</style>

<style lang="scss">
.imprint-content h5 {
    margin-top: calc(40vw * var(--pxToVw));
    margin-bottom: calc(20vw * var(--pxToVw));
    column-span: all;
}
</style>
