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

{% block title %}

{% endblock %}

{% block scripts %}

<script src="{% static 'js/hotjar_letter_1.js' %}"></script>
<script src="{% static 'js/prev_next_button.js' %}"></script>
<script src="{% static 'js/image_blur_1_2.js' %}"></script>
<script src="{% static 'js/image_blur_2_2.js' %}"></script>
<script src="{% static 'js/image_blur_3_2.js' %}"></script>
<script src="{% static 'js/slider_code_1.js' %}"></script>
<script src="{% static 'js/slider_code_2.js' %}"></script>
<script src="{% static 'js/slider_code_3.js' %}"></script>
<script src="{% static 'js/slider_code_4.js' %}"></script>
<script src="{% static 'js/slider_code_5.js' %}"></script>
<script src="{% static 'js/slider_code_6.js' %}"></script>

{% endblock %}


{% block styles %}

<link href="{% static 'css/custom_1.css' %}" rel="stylesheet">
<link href="{% static 'css/image_blur_2.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_1.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_2.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_3.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_4.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_5.css' %}" rel="stylesheet">
<link href="{% static 'css/slider_6.css' %}" rel="stylesheet">

{% endblock %}


{% block content %}

<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center " id="myTab" role="tablist">


  <li class="nav-item" >
    <a class="nav-link active" id="part1-tab" data-bs-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> List</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="part2-tab" data-bs-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">Profil 1</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part3-tab" data-bs-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">Profil 2</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part4-tab" data-bs-toggle="tab" href="#part4" role="tab" aria-controls="part4" onclick="topFunction()">Profil 3</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part5-tab" data-bs-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Profil 4</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part6-tab" data-bs-toggle="tab" href="#part6" role="tab" aria-controls="part6" onclick="topFunction()">Profil 5</a>
  </li>

  <li class="nav-item">
    <a class="nav-link" id="part7-tab" data-bs-toggle="tab" href="#part7" role="tab" aria-controls="part7" onclick="topFunction()">Profil 6</a>
  </li>

</ul>
<br>
<br>


<!-- Tab content -->


<!-- DOPIS-->


<div class="tab-content" id="myTabContent">

  <div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


<div class="card-header bg-transparent mainheader" >

Pokiaľ sa Vám text nezaostruje, stlačte tlačidlo myši a potiahnite. Akonáhle sa text zaostrí, pustite.
    <br/><br/><br/>
    <div id="container">
        <img src="{{ static image_path }}" alt="follow picture" />
        <div class="{{ real_image }}" ></div>

    </div>
<div id="show" style="position:fixed;top:0px;left:0px;"></div>

    <p> </p>
  </div>
<br>



<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>


<!-- PROFIL 1-->



  <div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold"> Profil 1 </h3>

    Pracujúci muž s nízkym príjmom pred dôchodkom žijúci na strednom Slovensku daroval 4 roky vlastnený jednoizbový byt dcére.
    <p></p>
    {% formfield player.T1_working_man_dec %}

    <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T1_working_man_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_one" class="form-control">
    <p id="feedback_one"><br></p>

</div>

  </div>
<br>



    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
  </div>


<!-- PROFIL 2-->

  <div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Profil 2</h3>

    Mladá pracujúca žena s vysokým príjmom žijúca na západnom Slovensku predala dom na východnom Slovensku zdedený po rodičoch, ktorí ho vlastnili 23 rokov.
    <p></p>
    {% formfield player.T2_working_woman_dec %}

        <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T2_working_woman_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_two" class="form-control">
    <p id="feedback_two"><br></p>

</div>

  </div>
<br>




    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>
  </div>

<!-- PROFIL 3-->


  <div class="tab-pane" id="part4" role="tabpanel" aria-labelledby="part4-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Profil 3</h3>

    Dôchodkyňa z južného Slovenska predala chatu zdedenú po sestre (sestra ju vlastnila 2,5 roka a dôchodkyňa rok).
    <p></p>

    {% formfield player.T3_retired_woman_dec %}

        <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T3_retired_woman_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_three" class="form-control">
    <p id="feedback_three"><br></p>

</div>

  </div>
<br>




    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>
  </div>



 <!-- PROFIL 4-->


  <div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Profil 4</h3>

    Podnikateľ v strednom veku žijúci na východnom Slovensku predal jednoizbový byt, ktorý vlastnil 4 roky, aby si kúpil väčší.
    <p></p>

    {% formfield player.T4_enterpreneur_man_dec %}

        <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T4_enterpreneur_man_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_four" class="form-control">
    <p id="feedback_four"><br></p>

</div>

  </div>
<br>




    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>
  </div>

     <!-- PROFIL 5-->


  <div class="tab-pane" id="part6" role="tabpanel" aria-labelledby="part6-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Profil 5</h3>

    Podnikateľka obchodujúca s nehnuteľnosťami, ktorá žije v Prešovskom kraji predala dva byty v Trnavskom kraji, pričom jeden kúpila pred rokom a pol  a druhý pred dvoma rokmi.
    <p></p>

    {% formfield player.T5_enterpreneur_woman_dec %}

        <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T5_enterpreneur_woman_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_five" class="form-control">
    <p id="feedback_five"><br></p>

</div>

  </div>
<br>




    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>
  </div>

<!-- PROFIL 6-->


  <div class="tab-pane" id="part7" role="tabpanel" aria-labelledby="part7-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold">Profil 6</h3>

    Nezamestnaný muž v strednom veku žijúci v Bratislave predal svoj dom, ktorý vlastnil 10 rokov, aby kúpil menší byt
    <p></p>


    {% formfield player.T6_unemployed_man_dec %}

        <label class="col-form-label">
    Nakoľko ste si istí Vašou odpoveďou?
    </label>

    <div class="slidecontainer">
    <input type="range" name="T6_unemployed_man_conf" value="None" step="1" style="width:500px" min="0" max="100" id="id_slider_six" class="form-control">
    <p id="feedback_six"><br></p>

</div>

    {% next_button %}

    <p></p>
    Pokiaľ nie je možné pokračovať, neodpovedali ste na niektorú z otázok.
    <p></p>
    <p></p>
    <button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>

    <p></p>
    <p></p>
    <p></p>

  </div>
<br>


</body>


{% endblock %}