<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title th:inline="text">[[#{company}]]</title>
<link href="../../static/css/bootstrap.min.css"
  th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

<link href="../../static/css/mosh.css" th:href="@{/css/mosh.css}"
  rel="stylesheet" />
</head>
<body>
  <div class="navbar-wrapper" th:fragment="navigation">
    <div class="container">
      <nav class="navbar navbar-inverse navbar-static-top">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#navbar"
              aria-expanded="false" aria-controls="navbar">
              <span class="sr-only" th:text="#{navigation.toggle}">Toggle
                navigation</span> <span class="icon-bar"></span> <span
                class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/" th:text="#{company}">Mosh</a>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li th:each="category : ${categories}" th:class="${category.prettyUrlFragment == prettyUrlFragment} ? 'active'"><a href="#"
                th:href="@{/categories/__${category.prettyUrlFragment}__.html}"
                th:text="${category.name}">Category</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
  <div class="container marketing">
    <footer th:fragment="footer">
      <p class="pull-right">
        <a href="#" th:text="#{general.backToTop}">Back to top</a>
      </p>
      <p th:inline="text">
        &copy; 2017 [[#{company}]] &middot; <a href="/legal-notice.html"
          th:text="#{navigation.legalNotice}">Legal Notice</a>
      </p>
    </footer>
  </div>
</body>
</html>