/**
 * GenericPopup Component
 * A reusable modal popup component
 */
Vue.component('generic-popup', {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        domId: {
            type: String,
            required: true
        },
        title: {
            type: String,
            default: ''
        }
    },
    template: `
        <div class="modal fade" :id="domId" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{title}}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <slot name="content"></slot>
                    </div>
                    <div class="modal-footer">
                        <slot name="footer"></slot>
                    </div>
                </div>
            </div>
        </div>
    `,
    watch: {
        visible: {
            immediate: true,
            handler(newVal) {
                try {
                    if (window.jQuery && window.jQuery.fn.modal) {
                        if (newVal) {
                            window.jQuery(`#${this.domId}`).modal('show');
                        } else {
                            window.jQuery(`#${this.domId}`).modal('hide');
                        }
                    } else {
                        console.error('jQuery or Bootstrap modal not available');
                    }
                } catch (e) {
                    console.error('Error toggling modal:', e);
                }
            }
        }
    }
}); 