<template>
  <q-card>
    <q-item-section>
      <q-item-label overline>{{ task.title }}</q-item-label>
      <q-item-label caption lines="2">{{ task.description }} </q-item-label>
      <q-item-label caption>Due: {{ task.due_date }}</q-item-label>
    </q-item-section>
    <q-expansion-item
      v-if="task.subtasks && task.subtasks.length"
      expand-separator
      label="Subtasks"
      default-opened
    >
      <TaskListComponent :tasks="task.subtasks" />
    </q-expansion-item>
  </q-card>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import type { Task } from 'src/stores/task';

defineProps<{ task: Task }>();
</script>
