<script setup lang="ts">
//import HelloWorld from './components/HelloWorld.vue'
//import TheWelcome from './components/TheWelcome.vue'
import {ref, onMounted, reactive } from 'vue'
import { $mqtt } from 'vue-paho-mqtt'
// import Projektor from '../Projektor.vue'
import Platno from '../Platno.vue'
import Lift from '../Lift.vue';
import Projektor from '../Projektor.vue';
import ProjectorPowerModule from "@/components/ProjectorPowerModule.vue";
import AudioControlModule from "@/components/AudioControlModule.vue";
import MasterPowerControlModule from "@/components/MasterPowerControlModule.vue";
import ResetButton from "@/components/ResetButton.vue";



const props = defineProps({
    room: String,
})
const _glavni_position = ref('main')
const _stranski_position = ref('side')
const _ctrl_type = ref('service')
</script>

<template>
    <div style="display: flex; gap: 1rem">
        <div>
          <Projektor :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type" />
          <Lift :room="props.room" :position="_glavni_position" />
          <Platno :room="props.room" :position="_glavni_position" :ctrlType="_ctrl_type"/>
          
        </div>
        <div>
          <Projektor :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type"/>
          <Lift :room="props.room" :position="_stranski_position" />
            <Platno :room="props.room" :position="_stranski_position" :ctrlType="_ctrl_type" />
        </div>
      <div>
        <h5>POWER CONTROL</h5>
        <div>
          <ProjectorPowerModule :room="props.room" />
          <AudioControlModule :room="props.room" />
          <MasterPowerControlModule :room="props.room" />
        </div>
        <div></div>
          <ResetButton :room="props.room"/>
      </div>
    </div>
</template>

<style scoped>

</style>
