<template>
  <h1>{{ page.content.sectiontitle }}</h1>

  <div class="intro" v-html="page.content.introduction"></div>

  <div>
    <button @click="isDialogOpen = true">Optimiser un projet existant</button>
    <button>Créer un nouveau projet avec DTL</button>
  </div>

  <div class="presentation">
    <div v-for="row in page.presentation" :key="row.id" class="row">
      <div v-for="column in row.columns" :key="column.id" class="column">
        <div v-for="block in column.blocks" :key="block.id" class="card">
          <img :src="block.content.cover.url" alt="" />
          <hgroup>
            <h2>
              {{ block.content.title }}
            </h2>
            <div v-html="block.content.text"></div>
          </hgroup>
        </div>
      </div>
    </div>
  </div>

  <OptimizationRequestDialog
    v-if="isDialogOpen"
    @close="isDialogOpen = false"
  />
</template>
<script setup>
import { storeToRefs } from "pinia";
import { usePageStore } from "../stores/page";
import OptimizationRequestDialog from "../components/design-to-light/OptimizationRequestDialog.vue";
import { ref } from "vue";

const { page } = storeToRefs(usePageStore());

const isDialogOpen = ref(false);
</script>
