<template>
    <div id="projects-list-container">
        <h2>Доступные доски</h2>
        <div v-if="dataStore.loadingProjects">Загрузка досок...</div>
        <div v-else-if="dataStore.projects.length === 0 && !dataStore.loadingProjects">Доски не найдены.</div>
        <ul v-else>
            <li v-for="project in dataStore.projects" :key="project.id">
                <ProjectComponent :project-data="project" />
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useDataStore } from "@/stores/data";
import ProjectComponent from "./Project.vue";

const dataStore = useDataStore();

onMounted(async () => {
    if (dataStore.projects.length === 0) {
        await dataStore.fetchProjects();
    }
});
</script>

<style scoped>
#projects-list-container h1 {
    margin-bottom: 20px;
}
</style>
