<script setup>
  import i18n from "@/i18n.js";
  import {ref} from "vue";

  const props = defineProps(["extCurrList"])

  const extCurrList = ref(props.extCurrList)
  console.log(extCurrList)
</script>

<template style="margin-top:5%;">
  <div style="display:flex; justify-content:center; " v-for="item in extCurrList">
    <div class="bodu">
      <div class="container">
        <div class="status"><a style="margin-left:30px">{{item.state}}</a></div>
        <div class="school"><a>{{item.school}}</a></div>
        <div class="formation"><a>{{item.formation}}</a></div>
        <div class="completion"><a>{{item.completion}}</a></div>
        <div class="download"><button>Download document</button></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container{
  color:white;
  height:100px;
  font-size:30px;
  display:grid;
  grid-template-columns:15% 10% 20% 15% 13.1%;
  grid-template-areas:
    "status school formation completion download";
  column-gap:10px;
}

.status {
  grid-area:status;
  align-self:center;
  font-size: 70%;
}

.school{
  grid-area:school;
  align-self:center;
  font-size: 70%;
}

.formation{
  grid-area:formation;
  align-self:center;
  font-size: 70%;
}

.completion{
  grid-area:completion;
  align-self:center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  font-size: 70%;
}

.download{
  grid-area: download;
  align-self:center;
}
button{
  font-size:15px;
  height:50px;
  width:75%;
  border:none;
  border-radius:20px;

}

.bodu {
  margin-top:2%;
  width:66%;
  border:2px solid black;
  border-radius:9px;
  background-color:rgb(50,50,50);
}


</style>