{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}


{% block title %}
Task 4
{% endblock %}

{% block styles %}

{% endblock %}


{% block scripts %}
        <script>
        let customTimerEle = document.getElementById('mins-left');
        let customTimer2 = document.getElementById('secs-left');
        let customTimer = document.getElementById('store_time');

        document.addEventListener("DOMContentLoaded", function (event) {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                customTimerEle.innerText = event.offset.totalMinutes;
                customTimer2.innerText = event.offset.totalSeconds - event.offset.totalMinutes*60;
                customTimer.innerText = event.offset.totalSeconds;

            });
        });

        function storeTime() {
            console.log("hallo", customTimer.innerText);
            document.getElementById('store_time').value = customTimer.innerText;
        }

    </script>
{% endblock %}
{% block content %}
    <input type="hidden" name="store_time" id="store_time" />
 <div class="alert alert-secondary" role="alert">
  This page will automatically submit in <b>
   <span id="mins-left"></span> minutes and <span id="secs-left"></span> seconds</b>. <br>

    <div class="card">
        <div class="card-body">

        <div class="mx-auto" style="width: 200px;">

          <img class="col-md-12 float-sm-end mb-12 ms-md-12" style="max-width:250px" src="{% static 'scenario1.jpg' %}"/>
        </div>

    <div class="clearfix">

    </div>


      <p> Please make your choice here:</p>


      <button name="danat" id="danat" value="A" class="btn btn-outline-primary" onclick="storeTime()">Select option A</button>
      <button name="danat" id="danat" value="B" class="btn btn-outline-primary" onclick="storeTime()">Select option B</button>



   </div>
    </div>
 </div>
{% endblock %}