<template>
  <q-timeline layout="dense" class="bg-white q-px-lg q-py-sm">
    <track-timeline-item
      v-for="(event, index) in track.events"
      :key="event.id"
      :track-event="event"
      :is-first="index === 0"
      :is-last="index === track.events.length - 1"
    />
  </q-timeline>
</template>

<script lang="ts">
import { Prop, Vue, Component } from 'vue-property-decorator'
import { QTimeline } from 'quasar'
import { Track } from '../dto/Track'
import TrackTimelineItem from './TrackTimelineItem.vue'

@Component({
  components: { TrackTimelineItem, QTimeline },
})
export default class TrackTimeline extends Vue {
  @Prop(Object) track!: Track
}
</script>
