{{ define "main" }}
{{ .Content }}

<nav class="live-tab-switcher">
  {{ range $index, $room := $.Site.Data.live }}
  <a class="live-tab-link{{ if ($index) eq 0 }} active {{end}}" id="button-{{$room.navId}}" onClick="switchTabs(event, '{{$room.navId}}')" href="#room-{{$room.navId}}">{{$room.name}}</a>
  {{end}}
</nav>

<section class="live-section">
  {{ range $index, $room := $.Site.Data.live }}
  <div id="room-{{$room.navId}}" class="live-player-wrapper {{ if ($index) eq 1 }} live-tab-d-none {{end}}">
    <video-js
      id="player-{{$room.navId}}"
      data-setup="{}" 
    >
      <source src="{{ $room.url }}">
      </video-js>
  </div>
  {{ end }}
  <iframe src="https://kiwiirc.com/client/chat.freenode.net/?&theme=cli#ozgurkon" class="live-chat"></iframe>
</section>
{{end}}

{{ define "scripts"}}
<script type="text/javascript" src="https://vjs.zencdn.net/7.8.1/video.js"></script> 
<script type="text/javascript" src="https://unpkg.com/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
<script type="text/javascript">

  const players = {
    {{ range $room := $.Site.Data.live }}
    {{ $room.navId}}: videojs('player-{{$room.navId}}', {
      controls: true,
      aspectRatio: '16:9'
    }),
    {{end}}
  }
  
  const roomAkgul = document.getElementById('room-akgul');
  const roomUckan = document.getElementById('room-uckan');
  const buttonAkgul = document.getElementById('button-akgul');
  const buttonUckan = document.getElementById('button-uckan');

  function switchTabs(event, id) {
    event.preventDefault();
    pausePlayer(id);

    if(id === "akgul") {
      setActive(buttonAkgul);
      notActive(buttonUckan);
      show(roomAkgul);
      hide(roomUckan);
    }
    if(id === "uckan") {
      setActive(buttonUckan);
      notActive(buttonAkgul);
      hide(roomAkgul);
      show(roomUckan);
    }
  }
  
  function pausePlayer(id) {
    const playerToPause = (id === "akgul") ? "uckan" : "akgul";
    players[id].play();
    players[playerToPause].pause();
   
  }

  function show(el) {
    if(el.classList.contains('live-tab-d-none')) return el.classList.remove('live-tab-d-none');
  } 

  function hide(el) {
    if(!el.classList.contains('live-tab-d-none')) return el.classList.add('live-tab-d-none');
  }

  function setActive(el) {
    if(!el.classList.contains('active')) return el.classList.add('active');
  }
  
  function notActive(el) {
    if(el.classList.contains('active')) return el.classList.remove('active');
  }

</script>
{{ end }}