<p>Browser: <span id="browser">Unbekannt</span></p>

<p>
   Session:
   {{#if known_session}} existing ({{session_id}}) {{else}} not existing {{/if}}
   {{#if alive_session}} alive {{/if}}
</p>
   
<p>Activity: {{ timediff }} ( N{{ now_timestamp }} - B{{ session_timestamp }} )</p>

<p>Login status: 
{{#if logged_in}}
   logged in as <em>{{ username }}</em><br>

  {{#if firstname}}{{#if lastname}}
    ({{firstname}} {{lastname}})
  {{/if}}{{/if}}

  {{#if managed_by}}
     [{{managed_by}}]
  {{/if}}
  
  {{#if teacher}}
    [Lehrer]
  {{/if}}

  {{#if admin}}
    [Admin]
  {{/if}}

  {{#if oauth_id}}
</p><p>OAuth id: {{oauth_id}} ({{oauth_provider}})
  {{/if}}

  {{#if logincode}}
</p><p>Logincode: {{logincode}}
  {{/if}}
     
</p><p><a href="/debug/logout">logout</a>
{{else}}
  not logged in <a href="/login">login</a>
{{/if}}
</p>

<p>
   Session token: {{session}}
   <a href="/debug/reset">reset</a>
   <a href="/debug/create">create</a>
</p>

<p>
   Connectiviy:<br>
   Local: <span id="latency_local">&nbsp;</span>, <span id="mid_local">&nbsp;</span>, <span id="speed_local">&nbsp;</span><br>
   Remote: <span id="latency_foreign">&nbsp;</span>, <span id="mid_foreign">&nbsp;</span>, <span id="speed_foreign">&nbsp;</span>
</p>
   
   

<script>
   var time_before = Date.now();
   
   var timers = [
      {url: "https://jim.test.bwinf.de/static/images/100k.png?", id: "speed_foreign"},
      {url: "https://jim.test.bwinf.de/static/images/10k.png?", id: "mid_foreign"},
      {url: "https://jim.test.bwinf.de/static/images/1k.png?", id: "latency_foreign"},
      {url: "/static/images/100k.png?", id: "speed_local"},
      {url: "/static/images/10k.png?", id: "mid_local"},
      {url: "/static/images/1k.png?", id: "latency_local"},
   ]
   
   for (var i = 0; i < timers.length; i++) {
      (function(url, id) {
         var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {                  
               var time_after = Date.now()
               var diff = time_after - time_before;
               document.getElementById(id).innerHTML = diff;
            }
         };
         xhttp.open("GET", url + Date.now(), true);
         xhttp.send();
      })(timers[i].url, timers[i].id)
   }
</script>

<script>
   // From https://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser
      navigator.sayswho= (function(){
         var ua= navigator.userAgent, tem, 
             M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
         if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
         }
         if(M[1]=== 'Chrome'){
            tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
            if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
         }
         M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
         if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
         return M.join(' ');
      })();
   
   document.getElementById("browser").innerHTML = navigator.sayswho; // outputs: `Chrome 62`
</script>
