<template>
    <div class="canvas container-fluid">
        <CanvasItem
            v-for="(item, index) in items"
            :key="index"
            :title="item.title"
            :title-text="item.title_text"
            :description="item.description"
            :project-id="props.projectId"
            :class="['canvas-item', item.class, 'card', 'shadow', 'p-3']"
            :is-admin="props.isAdmin"
        />
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CanvasItem from "@/components/canvas/CanvasItem.vue";

const props = defineProps<{
    projectId: number;
    isAdmin: boolean;
}>();

const items = ref([
    {
        title: 1,
        title_text: "1. Problème",
        description: "3 problèmes essentiels à résoudre pour le client",
        class: "Probleme",
    },
    {
        title: 2,
        title_text: "2. Segments",
        description: "Les segments de clientèle visés",
        class: "Segments",
    },
    {
        title: 3,
        title_text: "3. Valeur",
        description: "La proposition de valeur",
        class: "Valeur",
    },
    {
        title: 4,
        title_text: "4. Solution",
        description: "Les solutions proposées",
        class: "Solution",
    },
    {
        title: 5,
        title_text: "5. Avantage",
        description: "Les avantages concurrentiels",
        class: "Avantage",
    },
    {
        title: 6,
        title_text: "6. Canaux",
        description: "Les canaux de distribution",
        class: "Canaux",
    },
    {
        title: 7,
        title_text: "7. Indicateurs",
        description: "Les indicateurs clés de performance",
        class: "Indicateurs",
    },
    {
        title: 8,
        title_text: "8. Coûts",
        description: "Les coûts associés",
        class: "Couts",
    },
    {
        title: 9,
        title_text: "9. Revenus",
        description: "Les sources de revenus",
        class: "Revenus",
    },
]);
</script>

<style scoped>
@import "@/components/canvas/style-project.css";

.canvas {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    grid-auto-rows: min-content;
    gap: 12px;
    padding: 30px;
    position: relative;
    height: auto;
    max-height: none;
    box-sizing: border-box;
    overflow: visible;
}

@media (max-width: 768px) {
    .canvas {
        grid-template-columns: repeat(1, 1fr);
    }
}

.Probleme {
    grid-column: 1 / 3;
    grid-row: 1 / 5;
}
.Segments {
    grid-column: 9 / 11;
    grid-row: 1 / 5;
}
.Valeur {
    grid-column: 5 / 7;
    grid-row: 1 / 5;
}
.Solution {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
}
.Avantage {
    grid-column: 7 / 9;
    grid-row: 1 / 3;
}
.Canaux {
    grid-column: 7 / 9;
    grid-row: 3 / 5;
}
.Indicateurs {
    grid-column: 3 / 5;
    grid-row: 3 / 5;
}
.Couts {
    grid-column: 1 / 6;
    grid-row: 5 / 7;
}
.Revenus {
    grid-column: 6 / 11;
    grid-row: 5 / 7;
}

.canvas-item {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
}

.Probleme {
    background-color: #ffdddd;
}
.Segments {
    background-color: #ddffdd;
}
.Valeur {
    background-color: #ddddff;
}
.Solution {
    background-color: #fff0b3;
}
.Avantage {
    background-color: #d1c4e9;
}
.Canaux {
    background-color: #b2ebf2;
}
.Indicateurs {
    background-color: #ffe082;
}
.Couts {
    background-color: #ffcdd2;
}
.Revenus {
    background-color: #c8e6c9;
}
</style>
