<template>
  <TheNavbar></TheNavbar>
  <TheTwoColumnsLayout
      :left-column-class="'col-md-8 bg-vue'"
      :right-column-class="'col-md-4'"
      :fullsize="true"
  >
    <template #leftCol>
      <div class="mt-5 text-center">
        <div class="display-1 my-5">Billibox</div>
        <div class="display-4 my-5">Die kleine Welt alter Fotoapparate</div>
        <div class="my-5 offset-4 col-4">
          <img src="~@fortawesome/fontawesome-pro/svgs/duotone/camera.svg" class="img-fluid">
        </div>
      </div>

    </template>
    <template #rightCol>
      <transition
          enter-active-class="animate__animated animate__bounceInRight"
          leave-active-class="animate__animated animate__bounceOutRight"
          mode="out-in"
      >
        <component
            :is="componentName"
            @changeComponent="changeComponent"
        ></component>
      </transition>


    </template>


  </TheTwoColumnsLayout>
</template>

<script>
import TheTwoColumnsLayout from "@/layouts/TheTwoColumnsLayout";
import RegisterUser from "@/components/auth/RegisterUser";
import LoginUser from "@/components/auth/LoginUser";
import TheNavbar from "@/components/TheNavbar";

export default {
  name: "HomePage",
  components: {
    TheNavbar,
    TheTwoColumnsLayout,
    RegisterUser,
    LoginUser
  },
  data() {
    return {
      componentName: "RegisterUser"
    }
  },
  methods: {
    changeComponent(handler) {
      this.componentName = handler.componentName
    }
  }
}
</script>

<style scoped>
svg { color: white}
</style>