<template>
    <v-sheet>
        <draggable v-model="localItems">
            <curs-tematica-item 
                v-for="(item, index) in items"
                :key="'item-' + index"
                :item="item"
                :index="index"
                @delete="$emit('delete', $event)"
            />
        </draggable>
    </v-sheet>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        props: {
            items: {required: true},
        },

        computed: {
            localItems: {
                get: function() {
                    return this.items;
                },

                set: function(items) {
                    this.$emit('reordered', items);
                },
            },
        },

        components: {
            draggable
        },

        name: 'CursTematicaLista',
    }
</script>