<template>
  <AdminLayout>
    <Breadcrumb currentPageText="Sayfa Detay" go="/site-yonetimi/sayfa-listesi"/>
    <div class="form-part form-title">
      <div class="form-title-buttons">
        <button
          class="button-c button-save"
          @click="siteManagementPageService.SaveData"
          :disabled="!siteManagementPageStore.formChanged">
          Kaydet
        </button>
        <button
          class="button-c button-cancel"
          @click="siteManagementPageStore.RestoreForm"
          v-if="siteManagementPageStore.formChanged">
          Vazgeç
        </button>
      </div>
    </div>
    <div class="form-content">
      <div class="form-inner-content form-inner-content-left">
        <form-sayfa-bilgileri />
      </div>
      <div class="form-inner-content form-inner-content-right">
        <form-sayfa-ayar />
        <form-sayfa-picture />
      </div>
    </div>
  </AdminLayout>
</template>
<script setup lang="ts">
  import { onBeforeMount } from 'vue'
  import AdminLayout from '@/layouts/AdminLayout.vue'
  import FormSayfaBilgileri from '../components/form/FormSayfaBilgileri.vue'
  import FormSayfaAyar from '../components/form/FormSayfaAyar.vue'
  import FormSayfaPicture from '../components/form/FormSayfaPicture.vue'

  import { useRoute } from 'vue-router'
  const route = useRoute()
  import { useSiteManagementPageStore } from '../stores/siteManagementPageStore'
  const siteManagementPageStore = useSiteManagementPageStore()
  import { useSiteManagementPageService } from '../service/siteManagementPageService'
  const siteManagementPageService = useSiteManagementPageService()

  onBeforeMount(() => {
    siteManagementPageStore.selectedPage = Number(route.params.pageId)
    siteManagementPageStore.isNew = false
  })
</script>
