<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="<%= baseUrl %>/static/favicon.ico" />
    <link href="<%= baseUrl %>/static/css/lipstick.css" rel="stylesheet">
    <link href="<%= baseUrl %>/static/css/robohydra.css" rel="stylesheet">
    <script src="<%= baseUrl %>/static/js/robohydra.js"></script>

    <!-- HTML5 shiv -->
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- Header -->
    <div class="navbar">
      <div class="container">
        <span class="navbar-brand"><img src="<%= baseUrl %>/static/img/robohydra.png" /><a href="<%= baseUrl %>">RoboHydra Admin</a></span>
        <ul class="navbar-menu">
          <% [['/', 'Home'], ['/scenarios', 'Scenarios'], ['/summoner', 'Summoner']].forEach(function(pathAndTitle) { %>
            <li<% if (pathAndTitle[0] === currentSection) {%> class="is-active"<% } %>><a href="<%= baseUrl %><%= pathAndTitle[0] %>"><%= pathAndTitle[1] %></a></span>
          <% }); %>
        </ul>
      </div>
    </div>

    <%- content %>

    <div class="footer">
      <div class="container">
        <div style="float: right">
          <a href="http://robohydra.org/docs">Documentation</a>
          &mdash;
          <a href="http://robohydra.org/docs/tutorial">Tutorial</a>
        </div>

        Hydra
        '<span class="hydra-name value"><%= hydraName === undefined ?
        '<undefined>' : (hydraName === '' ? '<empty>' : hydraName)
        %></span>'

        &mdash;

        Started <span class="value"><%= startTime %></span>
      </div>
    </div>
</body>
</html>
