<template>
    <v-row :class="`ma-0 mt-2 checklist`">
        <v-col xl="12" class="pt-4 pb-0 pr-0"> <section-title theme="sm" title-fa="چک لیست" title-en="check list" /></v-col>
        <v-col xl="12" class="task-item row ma-0 mt-1 pt-1 pb-1 section-bordered flex-justified-space-between" :class="(task_status) ? 'done' : ''">
            <div class="flex-justified-right">
                <div class="En Bold text--24 counter">1</div>
                <v-switch :color="$_color('task')" inset class="mr-2" v-model="task_status"  />
                <div class="Fa pr-2 text"> چک کردن سئو وبسایت وردک </div>
            </div>
            <div class="flex-justified-left">
                <v-btn fab x-small :color="$_color('task')" dark>
                    <v-icon dark>WMi-pencil</v-icon>
                </v-btn>
                <v-btn fab x-small color="red" dark>
                    <v-icon dark>WMi-minus</v-icon>
                </v-btn>
            </div>
        </v-col>
        <v-col xl="12" class="row ma-0 mt-1 pt-1 pb-1 section-bordered flex-justified-right">
            <v-text-field
                v-validate="'min:4'"
                label=" متن آیتم را وارد کنید "
                color="cyan"
                prepend-icon="WMi-text"
            ></v-text-field>
            <v-btn
                fab
                small
                color="cyan"
                dark
                class="mr-3"
            >
                <v-icon dark>WMi-plus</v-icon>
            </v-btn>
        </v-col>
        <!--                        <div class="add-button-row flex-justified-center">-->
        <!--                            <v-icon>WMi-plus</v-icon>-->
        <!--                        </div>-->
    </v-row>
</template>

<script>
    export default {
        props: {

        },
        data: function () {
            return {
                task_status: false,
            };
        },

    };
</script>
<style lang="scss" scoped>
    .checklist .counter {
        width: 30px;
        border-left: 1px solid #eeeeec;
    }
    .checklist .task-item {
        transition: 0.2s;
        border-radius: 5px;
    }
    .task-item.done {
        border: 1px solid var(--color-purple);
        background-color: var(--color-bg-purple);
    }
    .task-item .text {
        transition: 2.0s;
    }
    .task-item.done .text {
        text-decoration: line-through;
        text-decoration-color: var(--color-purple);
    }
</style>
