<template>
  <div>
    <div class="flex">
      <IconField>
        <InputText v-model="search" placeholder="Search Pexels" />
        <InputIcon class="mdi mdi-magnify" />
      </IconField>
    </div>
    <div class="mt-4">
      <CardEdit
        v-for="(card, index) of cards"
        :key="card.id"
        v-model="cards[index]"
        class="mb-4"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import api from '@/js/api'

import CardEdit from '@/components/decks/CardEdit.vue';

let i = 0
const cards = ref([
  {
    id: i++,
    question: 'Cheese',
    answer: 'Le Fromage'
  },
  {
    id: i++,
    question: 'Bread',
    answer: 'Le pain'
  },
  {
    id: i++,
    question: 'Carrot',
    answer: 'La carotte'
  },
  {
    id: i++,
    question: 'Egg',
    answer: 'L\'œuf'
  },
  {
    id: i++,
    question: 'Frog',
    answer: 'La grenouille'
  }
])
</script>
