<template>
    <div class="kontakty">
        <h1>Kontakty</h1>
        <h2>Komponenty a Props</h2>
    
        <contact-card jmeno="Jan Novák" :vek="18" trida="CEO"/>
        <contact-card jmeno="Zuzana Svobodová" :vek="19" trida="Finanční kancelář"/>
        <contact-card jmeno="Petr Dvořák" :vek="18" trida="Dělník"/>

        <h2>v-for s komponentami</h2>
        <contact-card
        v-for="(kontakt, index) in kontakty" 
        :key="index"
        :jmeno="kontakt.jmeno"
        :vek="kontakt.vek"
        :trida="kontakt.trida"
        />
    </div>
</template>

<script>
import ContactCard from '@/components/ContactCard.vue';

export default{
    name:"ContactView",
    components:{
        ContactCard
    },
    data(){
        return{
            kontakty:[
                {jmeno:"Marie Nováková", vek:17, trida:"Brigadník"},
                {jmeno:"Pavel Bourák", vek:25, trida:"Řidič kamiónu"},
                {jmeno:"Lucie Bernardová", vek:23, trida:"Zástupkyně"},
            ]
        }
    }
}
</script>

<style>
.kontakty{
    max-width: 800px;
    margin: 0 auto;
    padding:20px;
    text-align: center;
}

</style>