<template>
  <div id="main">
    <div id="left">

      <UButton @click="showCreateProject = true">+ Projekt</UButton>
      <UModal v-model="showCreateProject">
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">

        </UCard>
      </UModal>

      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
        <UCard class="listItem">
          <UBadge>{{item.id}}</UBadge> {{item.attributes.name}}
        </UCard>
      </router-link>


    </div>
    <div id="right">
      {{selectedItem}}
      <UCard v-if="selectedItem.id">
        <template #header>
          <UBadge>{{selectedItem.id}}</UBadge> {{selectedItem.attributes.name}}
        </template>

        Kunde:<br>
        {{selectedItem.attributes.customer.data.attributes.name}}<br>

        Notizen: <br>
        {{selectedItem.attributes.notes}}

<!--        Lieferantenrechnungen: <br>
        <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}-->




      </UCard>
    </div>

  </div>

</template>

<script setup>

definePageMeta({
  middleware: "auth"
})

const {find,create} = useStrapi4()
const projects = (await find('projects',{populate: "*"})).data

const showCreateProject = ref(false)
const projectData = ref({})

let selectedItem = ref({})

const selectItem = (item) => {
  selectedItem.value = item
  console.log(item)
}

</script>

<style scoped>
#main {
  display: flex;
  flex-direction: row;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}
</style>