<template>
    <div class='modal_window__overlay' @click.self='closeModal'>
        <div class='modal_window'>
            <div
                    class='modal_window__loading_overlay'
                    :class='{
					"modal_window__loading_overlay--show": loading
				}'
            >
            </div>

            <span
                    class='modal_window__close'
                    @click='closeModal'
                    v-if='closeButton'
            >
				<font-awesome-icon :icon='["fa", "times"]' />
			</span>
            <div class='modal_window__main' :class='{ "modal_window__main--no_padding": noPadding }'>
                <slot name='main'></slot>
            </div>
            <div class='modal_window__footer' v-if='!hideFooter'>
                <slot name='footer'></slot>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'ModalWindow',
        props: ['value', 'width', 'close-button', 'hide-footer', 'no-padding', 'loading'],
        methods: {
            closeModal () {
                this.$emit('input', false)
            }
        }
    }
</script>
