<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
<style>
body{
margin: 0px;
font-family:sans-serif;
}


#bar, #bar>div {
display:inline-block;
padding: 8px;
margin:0px;
background: #8ca405;
color:white;
font-size:14pt;
height: 40px;
overflow-y:hidden;
}

#bar {
display:block;
padding:0px;
}

#bar>.nav {
float:right;
}
#bar>#time {
float:right;
padding:0px 8px;
text-align:right;
}
#timetext{
padding:0px;
margin:0px;
font-size:10pt;
}
#timetime{
padding:0px;
margin:0px;
margin-top:-2px;
font-size:18pt;
}
#ttsec {
font-size:8pt;
}

#bar>#hamburger, #bar>#menu, #bar>#time {
background: #6d8004;
font-weight:bold;
padding-left: 20px;
padding-right: 20px;
}

#bar>div.highlight {
background: #e7f1ae;
color:#334900;
}

iframe {
width: 100vw;border: 0px;height: calc(100vh - 45px);
}

a {
color: #eee;
text-decoration: none;
}
</style>
</head><body style="">

<div id="bar">

<div id="menu">
<a href="/contest/{{contestid}}">{{contestname}}</a>
</div>
<div>
{{name}}
</div>

{{#each subtasks}}
  {{#if active}}
    <div class="highlight">
      {{linktext}}
    </div>
  {{else}}
    <div>
      <a href="/task/{{id}}">{{linktext}}</a>
   </div>
  {{/if}}
{{/each}}

{{#if duration}}
<div id="time">
<div id="timetext">
Verbleibende Zeit
</div>
<div id="timetime">
{{time_left}}<span id="ttsec">{{time_left_sec}}</span>
</div>
<script>
  var seconds_left_at_start = {{seconds_left}};
  var timerStart = Date.now();

  function lz(a) {
    var b = a.toString();
    if (b.length < 2) {
      return "0" + b;
    }
    return b;
  }
  
  function updateTimer() {
    var seconds_passed = (Date.now() - timerStart) / 1000;
    var seconds_left = seconds_left_at_start - seconds_passed;

    if (seconds_left > 0) {
      var hour = seconds_left / 3600 | 0;
      var min = (seconds_left / 60 | 0) % 60 | 0;
      var sec = seconds_left % 60 | 0;

      text = hour.toString() + ":" + lz(min) + "<span id=\"ttsec\">:" + lz(sec) + "</span>";
      document.getElementById("timetime").innerHTML = text;
    }
    else if (seconds_left > -10) {
       document.getElementById("timetime").innerHTML = "0:00<span id=\"ttsec\">:00</span>";    
    }
    else {
       document.getElementById("contestpage").click()
    }
      
  }
  
  setInterval(updateTimer, 300);
</script>
</div>
{{/if}}

<div class="nav">
<a href="/contest/{{contestid}}" id="contestpage">🡅 Übersicht</a>
</div>
{{#if nexttask}}
<div class="nav">
<a href="{{ nexttask }}">🡆 Nächste Aufgabe</a>
</div>
{{/if}}
{{#if prevtask}}
<div class="nav">
<a href="{{ prevtask }}">🡄 Vorherige Aufgabe</a>
</div>
{{/if}}

<script>
function redirectOverview() {
  window.location.href = "/contest/{{contestid}}";
}

function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  }
}
function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}
var fullscreen = false;
function toggleFullscreen(element) {
if (fullscreen) {
  exitFullscreen();
fullscreen = false;
    document.getElementById("tgfs").innerText = "⇱";
}
else {
  enterFullscreen(element);
  fullscreen = true;
    document.getElementById("tgfs").innerText = "⇲";
  }
}
</script>
<div class="nav" onclick="toggleFullscreen(document.documentElement);">
<a href="javascript:;"><span id="tgfs">⇱</span> Vollbild</a>
</div>

</div>
</div>

<iframe src="/{{taskpath}}#taskid={{taskid}}&csrftoken={{csrf_token}}" name="taskframe">Leider unterstützt ihr Browser keine Frames. Sie können die Aufgabe auch manuell aufrufen: <a href="/{{taskpath}}#taskid={{taskid}}&csrftoken={{csrf_token}}">Aufgabe manuell bearbeiten</a>.</iframe>
</body></html>




