{% extends "layout.html" %}
{% block content %}
<style>
.bkg
{
height:79vh;
width:96%;
text-align:center;
float:none;
background-image:url('/static/bkg8.jpg');
background-repeat:no-repeat;
padding:2px;
margin:2px;
border-radius:12px;
}

.picstat
{
width:100%;
box-shadown:3px #333 #333;
background-size:auto;
border-radius:12px;
background-color:transparent;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding:8px;
background-image:url('/static/picstat.png');
display:block;
margin-left:auto;
margin-right:auto;
}


.btnBar
{
float:none;
height:20vh;
width:90%;
background-repeat:no-repeat;
background-size:contain;
padding:12px;
margin:12px;
background-color:#272b33;
position:fixed;
bottom:0px;
border-radius:12px;
}
.btn
{
width:100%;
box-shadown:3px #333 #333;
background-size:auto;
border-radius:12px;
background-color:black;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding:8px;
background-image:url('/static/orgBtn.jpeg');
display:block;
margin-left:auto;
margin-right:auto;
}
.btnOn
{
background-image:url('/static/lbBtn.jpeg');
width:100%;
box-shadown:3px #333 #333;
background-size:auto;
border-radius:12px;
background-color:green;
background-position:center;
background-repeat:no-repeat;
color:black;
float:none;
font-size:large;
padding:8px;
display:block;
margin-left:auto;
margin-right:auto;
}
.bdv
{
float:none;
background-color:#585a58;
text-align:center;
align-content:middle;
border-radius:0px;
width:100%;

}
.clk
{
font-size:48px;
position:fixed;
top:0px;
border-radius:12px;
color:#43af24;
background-color:black;
padding:8px;
text-align:center;
margin:4px;
}

.td
{

}
</style>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    var mth = today.getMonth();
var yr = today.getFullYear();
var dy = today.getDay();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('clck').innerHTML =
    (mth + 1) + "/" + dy + "/" + yr +  " " + h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function altTime(){
document.getElementById("psimg").alt=today.getHours()+today.getMinutes()+today.getSeconds());
}

function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function togglediv()
{
    var x = document.getElementById("btntbl");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
//tstamp();
}
function tstamp()
{
  var ts = document.getElementById("lblmsg");
  msg(Date());
}
function msg(m)
{
  var ts = document.getElementById("lblmsg");
  ts.innerHTML = m;

}
function togglebg()
{
var sp = document.getElementById("stp");
var curstp = parseInt(sp.innerHTML);
if (curstp => 0) {
  curstp=parseInt(curstp)+1;
  }else{
   curstp=0;
  }

if (curstp > 23){
sp.innerHTML = 0;
}else{
sp.innerHTML = curstp;
}

var bdiv = document.getElementById("bardiv");
bdiv.style.backgroundImage="url('/static/bkg"+curstp+".jpg')";
}


</script>
<meta http-equiv="refresh" content="30; url=/cmd">
<a href="/" style="color:white" tabstop="0">Back</a>
<a href="/static/picstat.png"><img src="/static/picstat.png" id="psimg" alt="picstat" border="0"></a>
<iframe src="/piup" style="width:50%;height:20%;float:right;border-width:0px"></iframe>
<!--
<img id="bgbutton" src="/static/nxt.png" style="float:right;border:0px;width:80px" onclick="togglebg()">
<img id="pwrbutton" src="/static/pwrGrn.png" onload="startTime()" style="float:right;border:0px;width:150px" onclick="togglediv()">
-->
<p id="clck" class="clk" style="display:none"></p>
<p id="stp" style="display:none">0</p>

<form method="post" action="change">
<div id="bardiv" class="bkg" style="visibility:block">
<p id="lblmsg" style="width:100%;float:left;"></p>
<table id="btntbl" class="btnBar" cellspacing="2px" cellpadding="2px" border="1px">
<tr>
<td class="td">
<div class=bdv>
      <button class=btnOn type="submit" value="boot" id="button1" name="button1">Reboot<br>Node</button>
      <button class=btn type="submit" value="down" id="button1" name="button1">Shutdown<br>Node</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class=btnOn class=btn type="submit" value="raspicfg" id="button1" name="button1">Raspi<br>Config</button>
      <button class=btn type="submit" value="ipcfg" id="button1" name="button1">IP<br>Config</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class=btnOn type="submit" value="snapshot" id="button1" name="button1">Snap<br>Shot</button>
      <button class=btn type="submit" value="localpic" id="button1" name="button1">local<br>Pic</button>
</div>
</td>

<td class="td">
<div class=bdv>
      <button class=picstat type="submit" value="picstat" id="button1" name="button1" onload="altTime()">Pics<br>Status</button>
      <button class=btn type="submit" value="Off_4" id="button1" name="button1">Misc<br>1</button>
</div>
</td>

<tr>
</table>

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