<template>
  <div id="app">
    <tabs>
      <!-- <div> -->
      <tab-item title="Onglet 1">
        <p>Contenu 1</p>
      </tab-item>
      <tab-item title="Onglet 2">
        <p>Contenu 2</p>
      </tab-item>
      <tab-item title="Onglet 3">
        <p>Contenu 3</p>
      </tab-item>
      <!-- </div> -->
    </tabs>

    <error-boundary>
      <card firstname="john" lastname="doe" />
    </error-boundary>
    <greet />
    <counter :initialValue="58" />
    <a-form @custom-event="logEventTime" />

    <ul>
      <li v-for="(person, index) in people" :key="person.lastname">
        <card
          v-if="index % 2 === 0"
          :firstname="person.firstname"
          :lastname="person.lastname"
        />
        <card
          v-else
          alternate
          :firstname="person.firstname"
          :lastname="person.lastname"
        />
      </li>
    </ul>

    <panel>
      <!-- <template v-slot:title>
        Titre du panneau
      </template> -->
      <p>Un élément</p>
      <p>Un autre élément</p>
    </panel>

    <custom-table :headers="['Prénom', 'Nom']" :items="people">
      <template v-slot="{ item }">
        <td>{{ item.firstname }}</td>
        <td>{{ item.lastname }}</td>
      </template>
      <template v-slot:actions="{ item }">
        <td>
          <button>Supprimer {{ item.firstname }}</button>
        </td>
      </template>
    </custom-table>
  </div>
</template>

<script>
import Card from "./components/Card";
import ErrorBoundary from "./components/ErrorBoundary";
import Panel from "./components/Panel";
import Tabs from "./components/Tabs";
import TabItem from "./components/TabItem";
import CustomTable from "./components/CustomTable";
import Counter from "./components/Counter.vue";
import AForm from "./components/AForm.vue";

export default {
  name: "App",
  components: {
    // MyCard: Card,
    CustomTable,
    ErrorBoundary,
    Tabs,
    TabItem,
    Panel,
    Card,
    Counter,
    AForm,
  },
  data() {
    return {
      people: [
        { firstname: "john", lastname: "doe" },
        { firstname: "bob", lastname: "dylan" },
        { firstname: "john", lastname: "wick" },
      ],
    };
  },
  methods: {
    logEventTime(date) {
      console.log("événément custom reçu à", date);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
