<!DOCTYPE html>
<html lang="en">
<head>
    <title>OSL Report: Summary</title>
    <style>
        body { background-color: White; }
        p { color: #fff; }
        div.figbox { width: 50%; display: table-cell; text-align: center; }
        div.tablebox { width: 30%; display: table-cell; text-align: left; margin; 20px }
        th, td { border-bottom: 1px solid #ddd; }
        table { border-collapse: collapse; width: 75%; }
        .button1 {
              background-color: #4CAF50; /* Green */
              border: none;
              border-bottom-style: solid;
              border-color: black;
              color: white;
              padding: 15px 32px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 16px;
            }
        .button1:active {
             color: #f6f6f6;
        }
    </style>
</head>

<body>

<div style='width:90%; margin: auto; text-align: center' >
    <h2>OSL Report: Summary</h2>
</div>

<div class="float-container">
    <div style='width: 80%; margin: auto; text-align: center; float: left'>
        {{ panel }}
    </div>
    <div style="width: 20%; text-align: left; float: right">
        <div>
            {{ filenames }}
        </div>
    </div>
</div>

<script>

// Blocks scrolling with arrow keys
window.addEventListener("keydown", function(e) {
    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
        e.preventDefault();
    }
}, false);

// All buttons
buttons = document.getElementsByClassName("button1");

// Variables to track which panel we're showing
var numButtons = buttons.length;
var currentButton = 0;

clickButton(0);

// Actions when we press an arrow key
document.onkeydown = checkKey;
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '38') {
        // up arrow
        if (currentButton > 0) {
            currentButton--;
        }
        clickButton(currentButton);
    }
    else if (e.keyCode == '40') {
        // down arrow
        if (currentButton < numButtons - 1) {
            currentButton++;
        }
        clickButton(currentButton);
    }
}

function clickButton(ind) {
    document.getElementsByClassName('button1')[ind].focus();
    document.getElementsByClassName('button1')[ind].click();
}

</script>

</body>
