<template>
    <Header />
    <error-wrapper></error-wrapper>
    <div id="container"> 
      <div id="main">
          <ProjectComp 
            v-for="(project, index) in projects" 
            :key="index"
            :projectName="project.name"
            :listName="project.members"
            :projectLink="project.link"
          />
      </div>
  
      <Agenda :projectRDV="rendezVous" />
    </div>
    
</template>

<script setup lang="ts">
import Header from '../components/HeaderComponent.vue';
import Agenda from "../components/Agenda.vue"
import ProjectComp from '../components/ProjectComponent.vue';

import { ref } from "vue";

const projects = ref([
  {
    name: "Projet Alpha",
    link: "/canvas", // to test
    members: ["Alice", "Bob", "Charlie"],
  },
  {
    name: "Projet Beta",
    link: "./canvas", // to test
    members: ["David", "Eve", "Frank"],
  },
]);

const rendezVous = ref([
  { projectName: "Projet Alpha", date: "2025-03-10", lieu: "P106" },
  { projectName: "Projet Beta", date: "2025-04-15", lieu: "Td10" },
]);

</script>

<style scoped>

#container {
    margin: 0;
    display: grid;
    grid-template-columns: 3fr 1fr; /* Main body takes 3/4, agenda 1/4 */
    height: 100vh; /* Full viewport height */
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
button:hover {
  background-color: #0056b3;
}

</style>