<template>
  <main class="flex flex-col" style="--row-gap: var(--space-32)">
    <Projects />
    <ProjectRequestDialog
      v-if="isProjectRequestDialogOpen"
      @close="isProjectRequestDialogOpen = false"
    />
    <ProjectRequestButton
      v-if="user?.role === 'client'"
      @click="isProjectRequestDialogOpen = true"
    />
  </main>
</template>

<script setup>
import Projects from "../components/Projects.vue";
import ProjectRequestButton from "../components/ProjectRequestButton.vue";
import ProjectRequestDialog from "../components/ProjectRequestDialog.vue";
import { ref } from "vue";
import { useUserStore } from "../stores/user";

const isProjectRequestDialogOpen = ref(false);
const { user } = useUserStore();
</script>
