<script setup>
  import ReloadIcon from '../assets/icons/reload.svg'
</script>

<template>
  <div id="mainContainer">
    <generatorDiv ref="generator"></generatorDiv>
    <div class="windowContainer" id="mainPannel">
      <div class="windowTitle">
        <div class="titleContent">
          <p>./MainContent.333</p>
          <!--<Teleport to="div#generatorContainer">-->
            <button type="button" class="titleBtn" @click="reloadContent()">
              <ReloadIcon name="reload" class="icon"/>
            </button>
          <!--</Teleport>-->
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
  /*=====================Main Content CSS*/

    /*=====================format pc*/
    @media(min-width:800px){
      #mainContainer{
        position: fixed;
        height: 100%;
        width: 50%;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        background-color: transparent;
        z-index: -2;
      }

      #mainPannel{
        position: relative;
        width: 90%;
        height: 90%;
        background-color: transparent;
        z-index: 1;
      }

    }

  /*=====================format tel*/
  @media(max-width:800px){
    #mainContainer{
      position: fixed;
      height: 50%;
      width: 100%;
      top: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      background-color: transparent;
      z-index: -2;
    }

    #mainPannel{
      position: relative;
      width: 90%;
      height: 90%;
      background-color: transparent;
      z-index: 1;
    }
  }
</style>

<script>
  import GeneratedContent from './GeneratedContent.vue'

  export default {
    name : 'MainContent',
    components:{
      GeneratedContent
    },
    methods: {
      reloadContent(){
        this.$refs.generator.generateContent();
      }
    },
    mounted(){
      console.log("Main content is loaded!");
    }
  };
</script>
