<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Diagrams </title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.css">
  <link rel="icon" href="haar.ico" type="image/x-icon"/>

  <style type="text/css">
    body {
      background-color: #FFFFFF;
    }
    .ui.menu .item img.logo {
      margin-right: 1.5em;
    }
    .main.container {
      margin-top: 7em;
    }
    .wireframe {
      margin-top: 2em;
    }
    .ui.footer.segment {
      margin: 5em 0em 0em;
      padding: 5em 0em;
    }
  </style>
</head>
<body>

  <!-- Following Menu -->
  <div class="ui fixed inverted menu">
    <div class="ui container">
      <a href="#" class="header item">
        {{{logo}}}

        {{projectName}}
      </a>
      {{#each directories}}
      <div class="ui simple dropdown item">
        <a href="#/{{hashLink}}">{{readableName}}</a>
      </div>
      {{/each}}
    </div>
  </div>

  <div class="ui main container">
    <div class="ui top attached tabular menu">
    {{#each directories}}
      <a class="item" data-tab="{{hashLink}}">
        {{readableName}}
      </a>
    {{/each}}
    </div>
    {{#each directories}}
    <div class="ui bottom attached tab segment" data-tab="{{hashLink}}">
      {{#each diagrams}}
      <div class="ui container">
        <h3 class="ui header">
          {{readableName}}
        </h3>
        <p>
          {{description}}
        </p>
        <object class="ui fluid image" data="{{staticSvgPath}}" type="image/svg+xml">
          <img src="{{staticImagePath}}" />
        </object>
      </div>
      <div class="ui divider"></div>
      {{/each}}
    </div>
    {{/each}}
  </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.1.8/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.min.js"></script>
<script>
  $(document).ready(function() {
    $('.menu .item').tab({
      history: true,
      historyType: 'hash'
    });
  });
</script>
</body>
</html>
