<template>
  <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>
  <!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
</template>

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

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