<template>
    <div class="row pb-3 mb-3 position-relative border-bottom pb_outer_section pr-5">

        <div class="col-sm-12">
            <div class="row p-0 mt-3">
                <PagebuilderContent class="col-sm-12" v-for="(column, index) in value.columns" :value="column"
                    :key="rand(index)" @change="onChange"></PagebuilderContent>
            </div>
        </div>


        <div class="pb_section_options position-absolute" style="top: 12px; right: 14px; width: 20px;">
            <a href="#" title="pilder_addsection_moveicon');?>" class="box-settings-icon box-move"><i
                    class="material-icons-outlined">sort</i></a>
            <a href="#" title="pagebuilder_addsection_duplicateicon" @click.prevent="copySection"
                class="box-settings-icon box-copy text-warning"><i class="material-icons-outlined">file_copy</i></a>
            <a href="#" title="pagebuilder_addsection_settingsicon" @click.prevent="toggleSettings"
                class="box-settings-icon box-settings text-secondary"><i
                    class="material-icons-outlined">settings</i></a>
            <a href="#" title="pagebuilder_addsection_deleteicon" @click.prevent="deleteSection"
                class="box-settings-icon box-delete text-danger"><i class="material-icons-outlined">delete</i></a>
            <b-modal v-model="show_settings" title="pagebuilder_addsection_settings_settings"
                @onClose="ustawieniaSave()">

                <div>
                    <div>
                        <div class="form-group mb-2">
                            <label class="w-100 col-form-label">
                                pagebuilder_addsection_settings_cssclass
                            </label>
                            <input type="text" class="form-control" v-model="value.class">
                        </div>
                        <div class="form-group mb-2">
                            <label>Margines górny</label>
                            <div class="input-group mb-3">

                                <input type="number" class="form-control" v-model="value.margin_top">
                                <div class="input-group-append">
                                    <span class="input-group-text" id="basic-addon1">px</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <label>Margines dolny</label>
                        <div class="input-group mb-3">

                            <input type="number" class="form-control" v-model="value.margin_bottom">
                            <div class="input-group-append">
                                <span class="input-group-text" id="basic-addon1">px</span>
                            </div>
                        </div>
                    </div>


                </div>
                <div><button class="btn btn-outline-secondary" @click.prevent="ustawieniaSave">
                        pagebuilder_addsection_settings_saveclose
                    </button></div>
            </b-modal>

        </div>

    </div>
</template>
<script>
import grid from './grid.js'
import MagicoModal from './MagicoModal.vue'
import PagebuilderContent from './PagebuilderContent.vue'
export default {
    props: { value: Object },
    components: {
        'b-modal': MagicoModal,
        PagebuilderContent
    },
    data: function () { return { items: grid, value2: '', show_settings: false } },
    methods: {
        changeSelect: function () {
            this.onChange();
        },
        onChange: function () {
            this.$emit('change');
        },
        deleteSection: function () { this.$emit('deleteSection', this.value) },
        copySection: function () { this.$emit('copy', this.value); },
        toggleSettings: function () { this.show_settings = !this.show_settings; },
        ustawieniaSave: function () { this.show_settings = false; this.onChange(); },
        rand: function (index) { return 'column' + index + Math.random() * 100 },

    },
    mounted: function () {
    },

}

</script>
<style>
#pagebuilder {
    background-color: #f5f5f5;
}

.pb_section {
    background-color: #fff;

    >div {
        overflow: hidden;
    }
}

.btn.btn-icon-sm, .btn.drp-icon-sm {
    width: 34px;
    height: 34px;
    padding: 6px 6px;
    margin-bottom: 0px;
    margin-right: 4px;
}
.material-icons-outlined{
    font-size: 20px;
}

</style>