<script setup lang="ts">
import Form from "./components/Form.vue";
import Lottie from "./components/Lottie.vue";

import { ref } from "vue";

const vorname = ref("");
const nachname = ref("");
const funktionZeileEins = ref("");
const funktionZeileZwei = ref("");
const BBEcke = ref("");
let playLottieStatus = ref(false);
let pauseLottieStatus = ref(false);

function playLottie(data: boolean) {
  playLottieStatus.value = data;
}

function pauseLottie(data: boolean) {
  pauseLottieStatus.value = data;
}
</script>

<template>
  <div class="logo">
    <img class="logoImg" src="./assets/rbb-logo.png" />
  </div>

  <div class="appGrid">
    <Form
      v-model:vorname="vorname"
      v-model:nachname="nachname"
      v-model:funktionZeileEins="funktionZeileEins"
      v-model:funktionZeileZwei="funktionZeileZwei"
      v-model:BBEcke="BBEcke"
      v-on:playLottie="playLottie"
      v-on:pauseLottie="pauseLottie"
    ></Form>

    <Lottie
      :vorname="vorname"
      :nachname="nachname"
      :funktionZeileEins="funktionZeileEins"
      :funktionZeileZwei="funktionZeileZwei"
      :BBEcke="BBEcke"
      :playLottieStatus="playLottieStatus"
      :pauseLottieStatus="pauseLottieStatus"
    ></Lottie>
  </div>
</template>

<style scoped>
.logo {
  text-align: right;
  margin: auto;
  padding-bottom: 50px;
}
.logoImg {
  width: 100px;
}
.appGrid {
  display: flex;
  flex-direction: row;
  gap: 50px;
}

@media screen and (max-width: 1200px) {
  .appGrid {
    flex-direction: column;
    align-items: center;
  }
}

body {
  background-color: #fff;
}
</style>