<script setup lang="ts">
import { ref, onMounted } from 'vue'
import MainPage from './components/pages/MainPage.vue';
import ProjManualPage from './components/pages/ProjManualPage.vue';
import VerticalTabs from './components/tabs/VerticalTabs.vue';
import Tab from './components/tabs/Tab.vue';

let urlParams = new URLSearchParams(window.location.search);

const currentRoom = ref(urlParams.get('room') || 'p01')


const pageNum = ref(0) // TODO spremen na 0



</script>

<template>
  <div id="wrapper">
    <header class="sidebar">

      <img class="logo" src="https://fri.uni-lj.si/sites/all/themes/fri_theme/images/fri_logo.png"  />
      <h1>{{ currentRoom.toUpperCase() }}</h1>

      <VerticalTabs id="nav">
        <Tab @click="pageNum=0" :selected="pageNum==0">Priprava</Tab>
        <Tab @click="pageNum=1" :selected="pageNum==1">Video</Tab>
        <Tab @click="pageNum=2" :selected="pageNum==2">Zvok</Tab>
        <Tab @click="pageNum=3" :selected="pageNum==3">Servis</Tab>
      </VerticalTabs>
      <small>turbo odličen super mega kontrol panel</small>
    </header>

    <main>
      <MainPage v-if="pageNum == 0" />
      <ProjManualPage v-else-if="pageNum == 1" :room="currentRoom" />
      
    </main>
  </div>
</template>

<style scoped>

#wrapper {
  width: 100%;
  height: 100%;
  display: flex;
}

main {
  flex: 1;
  padding: 1rem;
}

h1 {
  text-align: center;
}

.sidebar {
  max-width: 20vw;
}
.logo {
  max-width: 100%;
  padding: .4rem;
}

</style>
