<script setup lang="ts">
import { ref } from "vue";
import type { Task } from "@/types";
import { Copy, Trash, Check, X } from "@lucide/vue";

const editMode = ref<boolean>(false);

const task = defineModel<Task>({ required: true });
</script>

<template>
    <div class="list-row text-left">
        <div class="content-center">
            <input type="checkbox" class="checkbox" />
        </div>
        <div
            v-if="!editMode"
            class="cursor-pointer text-lg select-none"
            @click.prevent="editMode = true"
        >
            {{ task.name }}
        </div>
        <template v-else>
            <div>
                <input v-model="task.name" type="text" class="input mb-1" />
                <br />
                <button class="btn btn-square me-1" @click="editMode = false">
                    <X />
                </button>
                <button class="btn btn-square me-1">
                    <Check />
                </button>
                <button class="btn btn-square me-1">
                    <Copy />
                </button>
                <button class="btn btn-square">
                    <Trash />
                </button>
            </div>
        </template>
    </div>
</template>
