<template>
    <section :class="['modal', active && 'is-active' || '']">
        <div class="modal-background" @click="close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <div class="modal-card-title">
                    <slot name="title" :item="item">{{ title }}</slot>
                </div>
                <slot name="bar" :item="item"></slot>
                <button type="button" class="delete square" aria-label="close" @click="close">
                    <span class="icon">
                        <i class="fa fa-close"></i>
                    </span>
                </button>
            </header>
            <section class="modal-card-body">
                <slot name="default" :item="item"></slot>
            </section>
            <div class="modal-card-foot align-right">
                <slot name="footer" :item="item" :close="close"></slot>
            </div>
        </div>
    </section>
</template>
<script>
export default {
    props: {
        title: { type: String, default: ""},
    },

    data() {
        return {
            ///! If true, modal is open
            active: false,
            ///! Item or data passed down to slots.
            item: null,
        }
    },

    methods: {
        ///! Open modal dialog. Set provided `item` to dialog's one.
        open(item=null) {
            this.active = true
            this.item = item
        },
        ///! Close modal and reset item to null.
        close() {
            this.active = false
            this.item = null
        },
    }
}
</script>
