{% extends base_template %}
{% block content %}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
  <link rel="stylesheet" href="static/overview.css">
</head>
<body>
  <div class="w3-sidebar w3-bar-block w3-black w3-card" style="width:130px">
    <button class="w3-bar-item w3-button tablink w3-red" onclick="openTab(event, 'BOM')">BOM</button>
    <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Schematic')">Schematic</button>
    <button class="w3-bar-item w3-button tablink" onclick="openTab(event, 'Changelog')">Changelog</button>
    {% if not public -%}
    <a href="php/logout.php" class="w3-bar-item w3-button">Logout</a>
    {%- endif %}
  </div>

  <div style="margin-left:130px">
    <div id="BOM" class="w3-container tab" style="display:block;">
      <iframe src="ibom.{{ web_file_suffix }}" frameborder="0" style="display:block; width:100%; height:100vh;" title="BOM"></iframe>
    </div>

    <div id="Schematic" class="w3-container tab" style="display:none;">
      <iframe src="{{ schematic_name }}" frameborder="0" style="display:block; width:100%; height:100vh;" title="Schematic"></iframe>
    </div>

    <div id="Changelog" class="w3-container tab" style="display:none;">
      <iframe src="changelog.{{ web_file_suffix }}" frameborder="0" style="display:block; width:100%; height:100vh;" title="Changelog"></iframe>
    </div>
  </div>

  <script>
  function openTab(evt, tabName) {
    var i, x, buttons;
    x = document.getElementsByClassName("tab");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    buttons = document.getElementsByClassName("tablink");
    for (i = 0; i < x.length; i++) {
      buttons[i].className = buttons[i].className.replace(" w3-red", "");
    }
    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " w3-red";
  }
  </script>
</body>
</html>
{% endblock %}
