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

{% load otree static %}

{% load widget_tweaks %}


{% block styles %}

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};

function showmessage() {
    x = document.getElementById('message')
    x.style.display = "block";
}

</script>



<style>

body {font-family: Arial;}

.form-control {

}

#message {
  width: 100%;
  padding: 5px 0;
  text-align: center;
  background-color:  #FFC199;
  margin-top: 10px;
  display: none;
}



.initial {
        padding-top: 50px;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 50px;
        background-color: white;
        overflow-x: hidden;
        text-align: center;
    }

.flex-box2 {
  display: flex;
  width: 100%;
  margin: 0;
  height: 50px;
}
.flex-box .col
{
  border: 1px solid green;
  border-bottom: none;
  flex:0.5;
  padding: 12px;
  overflow-x: hide;
  overflow-y: scroll;
}
.flex-box2 .colSM
{
  border: 1px solid green;
  border-bottom: none;
  flex:0.5;
  padding: 12px;
  overflow-x: hide;
  overflow-y: scroll;
}
.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 600px;
}

.flex-box .colCV
{
  border: 1px solid green;
  flex:0.5;
  padding: 12px;
  overflow-y: scroll;
  overflow-x: hide;
}
.flex-box .colCV::-webkit-scrollbar{
background-color: white;
border-radius: 10px;
width: 20px;
}
.flex-box .colCV::-webkit-scrollbar-thumb{
background-color: grey;
border-radius: 10px;
border: 5px solid white;
}
.flex-box .colCV::-webkit-scrollbar-thumb:vertical{
height: 20px!important;
width: 20px;
}

.flex-box .colSM
{
  border: 1px solid green;
  flex:0.5;
  padding: 12px;
  overflow-y: scroll;
  overflow-x: hide;
}
.flex-box .colSM::-webkit-scrollbar{
background-color: white;
border-radius: 10px;
width: 20px;
}
.flex-box .colSM::-webkit-scrollbar-thumb{
background-color: grey;
border-radius: 10px;
border: 5px solid white;
}
.flex-box .colSM::-webkit-scrollbar-thumb:vertical{
height: 20px!important;
width: 20px;
}

.handle {
  width: 15px;
  text-align: center;
  color: white;

  transition: all ease-in 0.1s;
}

.draggable { background: pink; }

body {
}

.parent {
    position: relative;
    height: 750px;
    border: 1px solid yellow;
}
.child {
    position: absolute;
    right: 0;
    top: 0;
    width: 200px;
    height: 100%;
    outline: 1px solid #ccc;
    background: #ccc;
    border: 1px solid red;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Style instruction photos */
.pic1 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    margin-bottom:50px;
    }
.pic2 {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:0px;
    width:16px;
    }

/* Style Flexbox*/
.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    border: 0px solid yellow;
    flex: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-child-new {
    border: 1px solid yellow;
    resize: horizontal;
    overflow: auto;
}

.flex-child:first-child {
    margin-right: 20px;
}

table {
    margin: auto;
    overflow: auto;
    font-size: small;
}
table tr:nth-child(even){
     background-color: white;
}
table tr:nth-child(odd){
     background-color: #DCDCDC;
}
table th{
    padding: 10px;
}

ul {
    list-style-position: inside;
    padding-left: 0;
}

.tabtable td{
    border: 0px solid yellow;
    background-color: #f1f1f1;
}
.notestable th{
    font-size: medium;
    border: 0px solid yellow;
    background-color: white;
}

.centered img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 850px;
    }

.image-container {
	text-align: center;
	}

.zoom {
	max-height: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px auto;
	display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 850px;
	}

.row {
  display: flex;
  padding-bottom: 20px;
}

.column1 {
  flex: 34%;
}
.column2 {
  flex: 66%
}
.notemessage {
    font-size: 10px;
    max-width: 216px;
    float: right;
}

.tooltipp {
  position: relative;
  display: inline-block;
}

.tooltipp .tooltipptext {
  visibility: hidden;
  width: 170px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltipp:hover .tooltipptext {
  visibility: visible;
}

</style>
{% endblock %}



{% block content %}


<!--
     form.CV_1.as_hidden
     form.CV_2.as_hidden
     form.CV_3.as_hidden
     form.CV_4.as_hidden
     form.CV_5.as_hidden
     form.CV_6.as_hidden
     form.Notes_1.as_hidden
     form.Notes_2.as_hidden
     form.Notes_3.as_hidden
     form.Notes_4.as_hidden
     form.Notes_5.as_hidden
     form.Notes_6.as_hidden
     form.ip.as_hidden
     form.loc.as_hidden
-->

<h2>Applicant Screening</h2>
<p>
    Please give each application a unique score between zero and ten.
</p>

<div class="tab">
    <table class = "tabtable">
        <tr>
            {% if player.CV_viewing == 22 %}
            <td><button name="CV_to_view" value=22 class="tablinks active">Instructions</button></td>
            {% else %}
            <td><button name="CV_to_view" value=22 class="tablinks">Instructions</button></td>
            {% endif %}
            {% if player.CV_viewing == 1 %}
            <td> <button name="CV_to_view" value=1 class="tablinks active">Applicant 1 </button></td>
            {% else %}
            <td><button name="CV_to_view" value=1 class="tablinks">Applicant 1</button></td>
            {% endif %}
            {% if player.CV_viewing == 2 %}
            <td><button name="CV_to_view" value=2 class="tablinks active">Applicant 2</button></td>
            {% else %}
            <td><button name="CV_to_view" value=2 class="tablinks">Applicant 2<br></button></td>
            {% endif %}
            {% if player.CV_viewing == 3 %}
                <td><button name="CV_to_view" value=3 class="tablinks active">Applicant 3</button></td>
            {% else %}
                <td><button name="CV_to_view" value=3 class="tablinks">Applicant 3</button></td>
            {% endif %}
            {% if player.CV_viewing == 4 %}
                <td><button name="CV_to_view" value=4 class="tablinks active">Applicant 4</button></td>
            {% else %}
                <td><button name="CV_to_view" value=4 class="tablinks">Applicant 4</button></td>
            {% endif %}
            {% if player.CV_viewing == 5 %}
                <td><button name="CV_to_view" value=5 class="tablinks active">Applicant 5</button></td>
            {% else %}
                <td><button name="CV_to_view" value=5 class="tablinks">Applicant 5</button></td>
            {% endif %}
            {% if player.CV_viewing == 6 %}
                <td><button name="CV_to_view" value=6 class="tablinks active">Applicant 6</button></td>
            {% else %}
                <td><button name="CV_to_view" value=6 class="tablinks">Applicant 6</button></td>
            {% endif %}
        </tr>
        <tr>
            <td></td>
            {% if player.CV_viewing == 1 %}
            <td align="center">{{ form.CV_1 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_1')}} placeholder="Score" id="id_CV_1inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 1 to change score" onclick='showmessage()'></td>
            {% endif %}
            {% if player.CV_viewing == 2 %}
            <td align="center" class="tablinks active">{{ form.CV_2 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_2')}} placeholder="Score" id="id_CV_2inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 2 to change score" onclick='showmessage()'></td>
            {% endif %}
            {% if player.CV_viewing == 3 %}
            <td align="center" class="tablinks active">{{ form.CV_3 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_3')}} placeholder="Score" id="id_CV_3inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 3 to change score" onclick='showmessage()'></td>
            {% endif %}
            {% if player.CV_viewing == 4 %}
            <td align="center" class="tablinks active">{{ form.CV_4 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_4')}} placeholder="Score" id="id_CV_4inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 4 to change score" onclick='showmessage()'></td>
            {% endif %}
            {% if player.CV_viewing == 5 %}
            <td align="center" class="tablinks active">{{ form.CV_5 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_5')}} placeholder="Score" id="id_CV_5inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 5 to change score" onclick='showmessage()'></td>
            {% endif %}
            {% if player.CV_viewing == 6 %}
            <td align="center" class="tablinks active">{{ form.CV_6 }}</td>
            {% else %}
            <td align="center"><input type="number" value={{player.field_maybe_none('CV_6')}} placeholder="Score" id="id_CV_6inac"
                                      class="form-control" readonly="readonly" title="Click on Applicant 6 to change score" onclick='showmessage()'></td>
            {% endif %}
        </tr>
    </table>
</div>

<div id="message">
Click on the applicant first to change their score.
</div>

<div>
    {% if player.CV_viewing == 1 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 1:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_1}}
        </div>
    </div>
    <hr>
    {% elif player.CV_viewing == 2 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 2:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_2}}
        </div>
    </div>
    <hr>
    {% elif player.CV_viewing == 3 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 3:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_3 }}
        </div>
    </div>
    {% elif player.CV_viewing == 4 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 4:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_4 }}
        </div>
    </div>
    {% elif player.CV_viewing == 5 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 5:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_5}}
        </div>
    </div>
    {% elif player.CV_viewing == 6 %}
    <hr>
    <div class="row">
        <div class="column1">
            <h5 style="text-align: right">Notes about Applicant 6:</h5>
            <p class="notemessage">If there's anything you think we should know about the candidate or about your
                evaluation considerations, please use this box</p>
        </div>
        <div class="column2">
            {{form.Notes_6 }}
        </div>

    </div>
    {% endif %}
    {% if player.CV_viewing != 21 and player.CV_viewing != 22 %}
    <div class="flex-box">

        <div class="colCV">
            <p align = "right">&rarr;</p>
            <h3>Résumé</h3>

            <div class="image-container col-xs-12 medium-zoom-image">
                <img class="zoom" src="{% static image_path %}" data-action="zoom" width="200px">
            </div>

        </div>
        <div class="handle"></div>
        <div class="colSM">
            <p align = "left">&larr;Drag to resize window.</p>
            <h3>Social Media Data</h3>

            {% include html_path %}

        </div>
    </div>
    <hr>
        <div class="tab">
    <table class = "tabtable">
        <tr>
            {% if player.CV_viewing == 22 %}
            <td><button name="CV_to_view" value=22 class="tablinks active">Instructions</button></td>
            {% else %}
            <td><button name="CV_to_view" value=22 class="tablinks">Instructions</button></td>
            {% endif %}
            {% if player.CV_viewing == 1 %}
            <td> <button name="CV_to_view" value=1 class="tablinks active">Applicant 1 </button></td>
            {% else %}
            <td><button name="CV_to_view" value=1 class="tablinks">Applicant 1</button></td>
            {% endif %}
            {% if player.CV_viewing == 2 %}
            <td><button name="CV_to_view" value=2 class="tablinks active">Applicant 2</button></td>
            {% else %}
            <td><button name="CV_to_view" value=2 class="tablinks">Applicant 2<br></button></td>
            {% endif %}
            {% if player.CV_viewing == 3 %}
                <td><button name="CV_to_view" value=3 class="tablinks active">Applicant 3</button></td>
            {% else %}
                <td><button name="CV_to_view" value=3 class="tablinks">Applicant 3</button></td>
            {% endif %}
            {% if player.CV_viewing == 4 %}
                <td><button name="CV_to_view" value=4 class="tablinks active">Applicant 4</button></td>
            {% else %}
                <td><button name="CV_to_view" value=4 class="tablinks">Applicant 4</button></td>
            {% endif %}
            {% if player.CV_viewing == 5 %}
                <td><button name="CV_to_view" value=5 class="tablinks active">Applicant 5</button></td>
            {% else %}
                <td><button name="CV_to_view" value=5 class="tablinks">Applicant 5</button></td>
            {% endif %}
            {% if player.CV_viewing == 6 %}
                <td><button name="CV_to_view" value=6 class="tablinks active">Applicant 6</button></td>
            {% else %}
                <td><button name="CV_to_view" value=6 class="tablinks">Applicant 6</button></td>
            {% endif %}
        </tr>
    </table>
    </div>

    {% elif player.CV_viewing == 22 %}
    <p>
        You can view the application by clicking on the links above in the tabbed menu. When you are finished rating
        all six résumés, click the submit button.
    </p>
    <p>
        You should give each a unique score so you can always say that one application is better or worse than another.
    </p>
    <p>
        Below we remind you of the working environment and job description.
    </p>

    <img src="{% static 'Picture21.jpg' %}" class='pic1' width=50% hspace="30">

    <h4> <b> Place of Work: </b>Luxury Retreat and Wellness Resort</h4>

    <p>
        Our beach-side resort offers 100 luxury rooms nestled in tranquil surroundings allowing our guests to unwind and
        get away from it all and enjoy the area. We offer a spa, a wellness center, yoga classes and our restaurant
        offers a wide range of local and seasonal cuisine. Nearby beaches, trails, wine tastings, and golf opportunities
        are all on our doorstep.
    </p>


    <h4>  <b> Job Description: </b>Office Manager</h4>
    <p>
        The Office Manager will be responsible for the daily management of all administrative and office support
        operations. We are looking for an experienced manager with excellent customer service skills who will fit well
        into our team. Candidates should be hard-working, organized and reliable.
    </p>

    <h4><b>Duties Include:</b></h4>
        <ul>
            <li>Overseeing office activities</li>
            <li>Dealing with guests in courteous and timely manner</li>
            <li>On-boarding of new employees</li>
            <li>Coordinating and creating agenda for monthly staff meetings</li>
            <li>Promoting a friendly and welcoming environment for guests</li>
        </ul>

    <img src="{% static 'Picture1.jpg' %}" class="pic1" hspace="50" width=30% >

    <p> Each application has a <b>résumé</b>. </p>
    <p> In addition we provide data <b>publicly available on social media</b> accounts. <br>
    You can use this to get a second opinion of the candidate but bear in mind this kind of information is not submitted by
    the candidate. </p>

<p> Please use both resources to score the candidate as you see fit.</p>

    {% else %}
    <div class ="initial">
        <p>
            You can view the application by clicking on the links above in the tabbed menu. When you are finished rating
            all six résumés, click the submit button.
        </p>
    </div>
    {% endif %}
<hr>

<div style="float:right; width:130px" align = "right">
    <button name="subreq" value="True" position="Right" class="btn btn-success btn-large">Submit</button>
</div>

</div>


<input type="hidden" id="recleftperc" name="drag" value="">

<input type="hidden" id="rectime" name="dragtime" value="">

<input type="hidden" id="recCVscroll" name="CVscroll" value="">

<input type="hidden" id="recCVtime" name="CVscrolltime" value="">

<input type="hidden" id="recSMscroll" name="SMscroll" value="">

<input type="hidden" id="recSMtime" name="SMscrolltime" value="">



<script>includeHTML();</script>




{% endblock %}

{% block scripts %}

<script>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}


</script>

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
};

mediumZoom('.zoom', {
    background: '#f1f1f1',
    scrollOffset: 900,
    container: {
        width: 1311,
        height: 1689,
  },
  })


</script>

<script>
    includeHTML();
</script>

<script>
$('.flex-child').resizable({
    handles: 'n,w,s,e',minWidth: 50,
    maxWidth: 400
});
</script>


<script>
var timerDrag;
    // drag function
    (function($) {
    $.fn.drags = function(opt) {
        opt = $.extend({handle:"",cursor:"ew-resize", min: 1}, opt);

        if(opt.handle === "") {
            var $el = this;
        } else {
            var $el = this.find(opt.handle);
        }

        var priorCursor = $('body').css('cursor');

        return $el.css('cursor', opt.cursor).on("mousedown", function(e) {

            priorCursor = $('body').css('cursor');
            $('body').css('cursor', opt.cursor);

            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {

              var prev = $('.draggable').prev();
              var next = $('.draggable').next();

              // Assume 50/50 split between prev and next then adjust to
              // the next X for prev

              var total = prev.outerWidth() + next.outerWidth();


              console.log('l: ' +  prev.outerWidth() + ', r:' + next.outerWidth());

              var leftPercentage = (((e.pageX - prev.offset().left) + (pos_x - drg_w / 2)) / total);
              var rightPercentage = 1 - leftPercentage;

              if(leftPercentage * 100 < opt.min || rightPercentage * 100 < opt.min)
              {
                return;
              }

              // console.log('l: ' + leftPercentage + ', r:' + rightPercentage);

              prev.css('flex', leftPercentage.toString());
              next.css('flex', rightPercentage.toString());

                $(document).on("mouseup", function() {
                  $('body').css('cursor', priorCursor);
                    $('.draggable').removeClass('draggable').css('z-index', z_idx);
                });


              // Setting text of element P with id recleftperc

                if(timerDrag) {
                    window.clearTimeout(timerDrag);
                }
	            timerDrag = window.setTimeout(function() {
                  var time= ($.now());
                  var leftperclist= $("#recleftperc").val();
                  var timelist= $("#rectime").val();
                  $("#recleftperc").val(leftperclist + leftPercentage.toString() + ', ');
                  $("#recleftperc2").text(leftPercentage.toString());
                  $("#rectime").val(timelist + time.toString() + ', ');
                  $("#rectime2").text(time.toString());
                }, 100);
            });
            e.preventDefault(); // disable selection
        });

    }
})(jQuery);

$('.handle').drags();
</script>


<script>
var timerSM;
$('.colSM').on('scroll',function(){
    if(timerSM) {
		window.clearTimeout(timerSM);
	}
	timerSM = window.setTimeout(function() {
        var scrollTop= $('.colSM').scrollTop();
        var SMtime= ($.now());
        var SMscrolllist = $("#recSMscroll").val();
        var SMtimelist= $("#recSMtime").val();
        var SMheight= $('.colSM')[0].scrollHeight;
        var Clientheight= $('.colCV')[0].clientHeight;
        var SMscroll= scrollTop / (SMheight-Clientheight);
        $("#recSMscroll").val(SMscrolllist + SMscroll.toString() + ', ');
        $("#recSMscroll2").text(SMscroll.toString());
        $("#recSMtime").val(SMtimelist + SMtime.toString() + ', ');
        $("#recSMtime2").text(SMtime.toString());
    }, 100);
});
var timerCV;
$('.colCV').on('scroll',function(){
    if(timerCV) {
		window.clearTimeout(timerCV);
	}
	timerCV = window.setTimeout(function() {
        var scrollTop= $('.colCV').scrollTop();
        var CVtime= ($.now());
        var CVscrolllist = $("#recCVscroll").val();
        var CVtimelist= $("#recCVtime").val();
        var CVheight= $('.colCV')[0].scrollHeight;
        var Clientheight= $('.colCV')[0].clientHeight;
        var CVscroll= scrollTop / (CVheight-Clientheight);
        $("#recCVscroll").val(CVscrolllist + CVscroll.toString() + ', ');
        $("#recCVscroll2").text(CVscroll.toString());
        $("#recCVtime").val(CVtimelist + CVtime.toString() + ', ');
        $("#recCVtime2").text(CVtime.toString());
    }, 100);
});
</script>

<script>
for (let ele of document.getElementsByTagName('textarea')) {
  ele.rows = 5;
  ele.cols = 80;
}
</script>

{% endblock %}