<script setup lang="ts">
import { ref } from 'vue';
/* eslint-disable */
const props = defineProps<{
    commentString: string;
}>();

const emit = defineEmits<{
    clickClose: [];
    clickSave: [comment: string];
}>();

const text = ref(props.commentString);

const close = ()=> {
    emit('clickClose');
    text.value = '';
}

const save = ()=> {
    emit('clickSave',text.value);
    close();
}
</script>

<template>
    <q-card class="full-width">
        <div class="row items-center justify-between q-pa-md">
            {{ $t('timesheet.fields.header_comment') }}
        </div>
        <q-separator/>
        <div class="q-pa-md">
            <q-input
                v-model="text"
                type="textarea"
                autogrow
                filled
                :label= "$t('timesheet.fields.textarea_comment')"
                :counter=true
                maxlength="512"
                color="primary"
            />
        </div>
        <div class="row justify-end q-gutter-sm q-pa-sm">
            <q-btn
                color="secondary"
                text-color="grey-8"
                :label="$t('timesheet.cancel_button')"
                @click="close"             
            />  
            <q-btn
                :label="$t('timesheet.save_button')"
                color="primary"
                @click="save"
            />
        </div>
    </q-card>
</template>