{% extends "base.html" %}

{% block head %}
  <title> {{ title }} </title>
{% endblock %}

{% block body %}
  <div class="container" id="container">
    <div id="header">
      <div id="navigation"></div>
    </div>
    <div id="content-container">
<!--       <div id="navmenu">
     <ul id="list"> <li><a href="#/index">Carbon Neutral Village</a></li>
<li><a href="#/about us">About Us</a></li>
<li><a href="#/contact us">Contact Us</a></li>
</ul></div>-->
</div>
    <div id="footer"> {{ footer|safe }} </div>
  </div>

  <script>
    //Code to initialize the framework
    window.M = window.M || {};
    M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
    M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
    M.site_content = {{ content|tojson|safe }};
    window.onload = function() {
      M.init();
    };
  </script>

{% endblock %}

{% block scripts %}
  <script src="{{url_for('static', filename='js/mouchak.js')}}"></script>
  <script src="{{url_for('static', filename='js/models.js')}}"></script>
  <script src="{{url_for('static', filename='js/views.js')}}"></script>
{% endblock %}

{% block templates %}

  <!-- Underscore templates -->
  <script type="text/template" id="news-template">
    <div id="feeds">
      <img src="img/ajax-loader.gif" id="feeds-loader"/>
    </div>
  </script>
  <script type="text/template" id="news-item-template">
    <div class="news-item-wrapper">
      <div class="news-title"><%= title %></div>
      <a href="<%= link %>">Read More</a>
    </div>
  </script>

  <!-- navigation templates
    the ones with .nav-type can be used interchangbly to render different
    kinds of navigation bar / components
    one can add more
  -->
  <script type="text/template" id="nav-bar-template" class="nav-type">
    <div class="navbar navbar-default" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="<%= brand_href %>"><%= brand %></a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav"></ul>
      </div>
    </div>
  </script>

  <script type="text/template" id="nav-pills-template" class="nav-type">
    <div class="navigation">
      <ul class="nav nav-pills"></ul>
    </div>
  </script>

  <script type="text/template" id="nav-item-template">
    <li class="<%= cls %>">
      <a href="#/<%=page%>"> <%= M.humanReadable(page) %> </a>
    </li>
  </script>

  <script type="text/template" id="nav-dropdown-template">
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#/<%= M.sanitize(name) %>"
      data-target='#'>
      <%= name %>
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <% _.each(list, function(item) {
        %>
        <li><a href="#/<%= M.sanitize(item) %>"> <%= item %> </a></li>
        <%
      });
      %>
    </ul>
    </li>
  </script>

  <!-- Template for map-->
  <script type="text/template" id="map-template">
    <div id="map">
    </div>
  </script>

  <script type="text/template" id="image-view-template">
    <div class="img-wrapper">
      <img src="<%= src %>">
    </div>
  </script>

{% endblock %}