<template>
<v-container>
<h1>Directors</h1>
  <v-row>
    <v-col cols="4" v-for="director in directors">
      <v-card :title="director.name">
        <v-card-text>
        <ul class='pl-2'>
          <li>birthdate: {{director.birthdate.toLocaleDateString()}}</li>
          <li>nationality: {{director.nationality}}</li>
        </ul>
        </v-card-text>
      </v-card>
    </v-col>
  </v-row>
</v-container>
</template>
<script setup>
import {ref} from 'vue'
const directors = ref([])
fetch("http://localhost:8000/directors").then(async response => {
  let data = await response.json()
  directors.value = data.map(raw_director => {
  const birthdate = raw_director.birthdate.split("-")
    return {
      ...raw_director,
      birthdate: new Date(birthdate[2], birthdate[1], birthdate[0])
    }
  })
})
</script>
