<template>
    <li class="todo flex justify-between items-center bg-white rounded mb-1 px-2 py-1"
        >
        <div class="flex flex-1" draggable="true">
            <svg-vue icon="draggable" class="w-4 block mr-2 cursor-move" />
            {{ toDo.data.attributes.data.name }}
        </div>
        <div class="flex">
            <svg-vue icon="edit" @click="edit = !edit" class="edit-icon z-10 w-4 block cursor-pointer mr-1" />
            <input type="checkbox" v-model="checked">
            <span v-if="edit" @click="deleteToDo(toDo, position)">X</span>
        </div>
    </li>
</template>

<script>
    export default {
        name: "ToDo",
        data: function () {
            return {
                name: this.toDo.data.attributes.data.name,
                errors: null,
                edit: false,
                checked: false,
            }
        },
        props: {
            toDo: {
                type: Object,
                require: true
            },
            position: {
                type: Number,
                require: true
            }
        },
        mounted() {
            console.log(this.$key)
        }
    }
</script>

<style scoped>
    .edit-icon {
        opacity: 0;
        transition: opacity 0.2s;
    }

    .todo:hover .edit-icon {
        opacity: 1;
        transition: opacity 0.2s;
    }
</style>
