<script setup>
const cursus=[
  {
  "id": 12,
  "name": "Math pour l'info",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},
  {
  "id": 42,
  "name": "Operating Systems",
  "credits": 8,
  "faculty": "science",
  "teacher": 14,
  "Assistants": []},
  {
  "id": 42,
  "name": "Fonctionnement des ordinateurs",
  "credits": 11,
  "faculty": "science",
  "teacher": 42,
  "Assistants": []},

  ]
</script>
<template>
  <div class="body">
    <div  class="listElement " v-for="item in cursus">
      <div class=" containerElement">
        <div class="name"> {{item.name}} </div>
        <div class="teacher">{{item.teacher}}</div> 
        <div class="credits">Credits:{{item.credits}}</div>  
      </div>
    </div>
  </div>
</template>

<style scoped>
.body {
    width:100%;
    margin-bottom:10px;
  }
 .containerElement{ 
   justify-content:center;
    display:grid;
    grid-template-columns:350px 350px 200px;
    grid-template-areas:
    "name teacher credits"; 
    column-gap:10px;
    
  }
  
  .name {
    grid-area:name;
    align-self:center;
  }

  .teacher{
    grid-area:teacher;
    align-self:center;
  }

  .credits{
    grid-area:credits;
    align-self:center;
  }

.listElement{
  border:2px solid black;
  font-size:25px;
  color:white;
  padding:20px;
  background-color:rgb(50,50,50);
  border-radius:20px;
  margin-bottom:10px;
}
</style>
