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

const paymentsList = await getAllPayments()

</script>

<template style="margin-top:5%;">
  <div style="display:flex; justify-content:center; " v-for="item in paymentsList">
    <div class="bodu">
      <div class="container">
        <div class="regNo"><a style="margin-left:30px">RegNo : {{item.studentRegNo}}</a></div>
        <div class="client"><a>Client : {{item.client}}</a></div>
        <div class="amount"><a>Amount : {{item.amount}}€</a></div>
        <div class="date" style="margin-left: 10%">{{item.date.slice(0,10)}}</div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container{
  color:white;
  height:100px;
  font-size:30px;
  display:grid;
  grid-template-columns:20% 25% 15% 17%;
  grid-template-areas:
    "date regNo client amount";
  column-gap:10px;
}

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

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

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

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

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>

