{% extends "base.html" %}

{% block head %}

  <link rel="stylesheet" href="{{url_for('static', filename='css/main.css')}}">

  <title> {{ title }} </title>

{% endblock %}

{% block body %}

  <div class="container" id="container">

    <div id="header">

      <div id="header-banner">

        {{ content['header']['html']|safe }}

      </div>

      <div id="navigation"></div>

    </div>

    <div id="content-container"></div>

    <div id="footer"> {{ content['footer']['html']|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.AnalyticsURL = function() { return "{{ url_for('analytics') }}"; };

    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 %}