<template>
    <v-sheet outlined class="mb-2" color="orange lighten-2" rounded="lg">
        <v-sheet class="d-flex pa-2" rounded="lg">
            <v-sheet width="50" class="text-right pr-2">
                <v-chip small outlined>
                    {{1 + index}}.
                </v-chip>
            </v-sheet>

            <v-sheet width="calc(100% - 50px)" class="pr-2">
                <v-textarea
                    dense
                    auto-grow
                    clearable
                    no-resize
                    rows="2"
                    color="blue"
                    :rules="[v => !! v || __('Nu poate să lipsească')]"
                    class="text-caption ma-0"
                    v-model="item.text"
                >
                    <template #append-outer>
                        <cs-btn 
                            icon="mdi-delete"
                            small
                            color="red"
                            tooltip="Ștergerea tematicii"
                            @click="$emit('delete', item.id)"
                        />
                    </template>
                </v-textarea>
            </v-sheet>
        </v-sheet>
    </v-sheet>
</template>

<script>
    export default {
        props: {
            item: {required: true},
            index: {required: true},
        },

        components: {
            CsBtn: require('@CsVueComp/buttons/CsBtn').default,
        },

        name: 'CursTematicaItem',
    }
</script>