{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Tur Raporu
{% endblock %}

{% block content %}
    <style>
        body {
            background-image : url("{{ static 'pexels-gabriela-palai-395198.jpg' }}")
        }
        p1 {
            font-weight : bold;
        }9
        h5 {
            font-weight : bold;
        }
    .chat-widget {
        position: fixed;
        bottom: 0px;
        left: 0px;
        max-width: 50em;
        z-index: 100;
        background-color: #eee;
        padding: 1em;
    }

    </style>
<style>
    .tab {
        display: none;
    }
</style>

{{ include C.TABS_2_TEMPLATE }}

<script>

    let activeTab = 0;
    let tabs = document.getElementsByClassName('tab');

    function showCurrentTabOnly() {
      for (let i = 0; i < tabs.length; i++) {
        let tab = tabs[i];
        if (i === activeTab) {
          tab.style.display = 'block';
          tab.scrollIntoView();
        } else {
          tab.style.display = 'none';
        }
      }
    }

    showCurrentTabOnly();
    for (let btn of document.getElementsByClassName('btn-tab')) {
        btn.onclick = function () {
            activeTab += parseInt(btn.dataset.offset);
            showCurrentTabOnly();
        }
    }
</script>

<div class="chat-widget">
    <b>Chat with your group</b>
    {{ chat }}
</div>

{{ include C.PAPERCUPS_TEMPLATE }}
{% endblock %}