<template>
    <div>
        <div class="row col-md-12 pagebuilder_section">
            <div v-for="(item, index) in $pagebuilder.items" :key="index" class="col-md-2">
                <template v-if="!item.type || item.type != 'custom'">
                    <div class="my-check v2">
                        <label @click="$emit('input', index)" :for="'pos_' + index">
                            <div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
                            <img v-else style="width:100%"
                                :src="'https://cdn.magico.pl/pagebuilder/images/' + index + '.jpg'" alt="1 kolumna">
                            <span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
                                    item.label
                            }}</span>
                        </label>
                    </div>
                </template>
            </div>
        </div>
        <!-- <div class="col-md-12 text-center">
            <h3>DESIGN SYSTEM</h3>
            <div>
                <div class="row col-md-12 pagebuilder_section">
                    <div v-for="(item, index) in items" class="col-md-2" v-if="item.type && item.type == 'custom'">
                        <div class="form-check v2">
                            <input @input="event => { $emit('input', index) }" type="radio" :id="'pos_' + index"
                                name="pos">
                            <label :for="'pos_' + index">
                                <div style="width:100%" v-if="item.svg" v-html="item.svg"></div>
                                <img v-else style="width:100%"
                                    :src="'`+ BASE_URL +`' + 'assets/images/pagebuilder/' + index + '.jpg'"
                                    alt="1 kolumna">
                                <span style="cursor: pointer" class="d-inline-block w-100 text-center mt-1 mb-1">{{
                                        item.label
                                }}</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>

export default {
    methods: {},
    props:['value'],
    data: function () {
        return {
            items: {}, //{'core_pagebuilder_section_naglowek':'core_pagebuilder_section_naglowek', 'core_pagebuilder_section_tresc':'core_pagebuilder_section_tresc', 'core_pagebuilder_section_widget_jakis':'core_pagebuilder_section_widget_jakis'},
        }
    },
    mounted() {

    }
}
</script>
<style>
.my-check input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.my-check label {
    cursor: pointer;
}
</style>