<script setup>
import {Home} from "./pages/Home.js";
import {BestLife} from "./pages/BestLife.js";
import {AboutUs} from "./pages/AboutUs.js";
import {OurVision} from "./pages/OurVision.js";
import {OurCommitment} from "./pages/OurCommitment.js";
import {OurHistory} from "./pages/OurHistory.js";
import {ChildSafeStandard} from "./pages/ChildSafeStandard.js";
import {AdvisoryServices} from "./pages/AdvisoryServices.js";
import {PartnerWithUs} from "./pages/PartnerWithUs.js";
import {OurGroups} from "./pages/OurGroups.js";
import {Vectea2024} from "./pages/Vectea2024.js";
import {AdvocaryAndResearch} from "./pages/AdvocaryAndResearch.js";
import {SAEW} from "./pages/SAEW.js";
import {AssessmentSupportService} from "./pages/AssessmentSupportService.js";
import {LandingPage} from "./pages/LandingPage.js";
import {ref} from "vue";

const slide = {
  title: "About ELAA",
  description: "ELAA is a non-profit peak body championing excellence in Early Childhood Education and Care. They work collaboratively with members, partners, and all levels of government to develop solutions ensuring equity and excellence in our sector.",
  public: true,
  featured_image: 'https://www.gstatic.com/webp/gallery/1.jpg',
  primary_button: {
    show: true,
    label: 'Join ELAA',
    url: '/admin', // external could be an url
    type: 'site-content',
    open_in_new_tab: true,
  },
  secondary_button: {
    show: true,
    label: 'Learn about ELAA',
    url: '/admin', // external could be an url
    type: 'site-content',
    open_in_new_tab: true,
  },
}

const tab = {
  title: "Free Downloadable Resources",
  description: "Explore a variety of no-cost tools and information available to everyone.",
  public: true,
  featured_image: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png',
  primary_button: {
    show: true,
    name: 'Linked to',
    label: 'View all',
    url: 'google.com', // external could be an url
    type: 'external-page',
    open_in_new_tab: true,
  },
}

const timelineItem = {
  title: "2025",
  group_title: "2025",
  max_items: 5,
  lines: [
    {
      title: "Free Downloadable Resources",
      description: "Explore a variety of no-cost tools and information available to everyone.",
    }
  ]
}

const linkCardItem = {
  title: "2025",
  description: "2025",
  public: true,
  icon: 'XCircle',
  primary_button: {
    show: true,
    name: 'Button',
    label: 'Learn more',
    url: 'https://beta-frontend.elaa.org.au/img/homepage/asset_free_resources.png', // external could be an url
    type: 'external-page',
    open_in_new_tab: true,
  },
}

const sites = [
  {
    name: "Site 1",
    href: "/site-1",
  },
  {
    name: "Site 2",
    href: "/site-2",
  }
]

const forms = [
  {
    name: "Form 1",
    value: 1,
  },
  {
    name: "Form 2",
    value: 2,
  }
]

const landingPage = ref(LandingPage);

const breadcrumbs = [
  'Site 1',
  'Site 2',
]
</script>

<template>
  <div>
    <div style="margin: 40px 0;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">About Us</h1>

      <PageRender :page="AboutUs" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advocary And Research</h1>

      <PageRender :page="AdvocaryAndResearch" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Best Life</h1>

      <PageRender :page="BestLife" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Home</h1>

      <PageRender :page="Home" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Commitment</h1>

      <PageRender :page="OurCommitment" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our History</h1>

      <PageRender :page="OurHistory" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Partner With Us</h1>

      <PageRender :page="PartnerWithUs" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Vectea 2024</h1>

      <PageRender :page="Vectea2024" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Advisory Services</h1>

      <PageRender :page="AdvisoryServices" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Assessment Support Service</h1>

      <PageRender :page="AssessmentSupportService" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Child Safe Standard</h1>

      <PageRender :page="ChildSafeStandard" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Landing Page</h1>

      <PageRender :page="LandingPage" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Groups</h1>

      <PageRender :page="OurGroups" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">Our Vision</h1>

      <PageRender :page="OurVision" />
    </div>
    <div style="margin: 40px 0; border-top: 1px solid black; padding-top: 40px;">
      <h1 style="margin-bottom: 20px; font-size: 50px;text-align: center;">SAEW</h1>

      <PageRender :page="SAEW" />
    </div>

<!------------------------------------------|||---------------------------------------------->

<!--    <div style="margin: 40px 0">-->
<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Slider Edit</h1>-->
<!--      <ItemEdit :item="slide" :sites="sites"/>-->
<!--    </div>-->
<!--    <div style="margin: 40px 0">-->
<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Link Card Edit</h1>-->
<!--      <LinkCardEdit :item="linkCardItem" :sites="sites"/>-->
<!--    </div>-->
<!--    <div style="margin: 40px 0">-->
<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Vertical Tab Edit</h1>-->
<!--      <ItemEdit :item="tab" :sites="sites"/>-->
<!--    </div>-->
<!--    <div style="margin: 40px 0">-->
<!--      <h1 style="margin-bottom: 20px; font-size: 50px;">Page Builder</h1>-->
<!--      <PageBuilder v-model="landingPage" :breadcrumbs="breadcrumbs" :forms="forms" :sites="sites"/>-->
<!--    </div>-->
  </div>
</template>