{% load utility i18n compress %}
<!DOCTYPE html>
<html>
  <head>
    <title>
      {% block title %}
        {% if view.title %}
          {# Managed properly by the view #}
          {{ view.title }}
        {% else %}
          {# By hand in the template #}
          {% block subtitle %}{% endblock subtitle%}
          {% block sitetitle %}{% endblock sitetitle%}
        {% endif %}
      {% endblock title %}
    </title>
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="utf-8" />
    <link rel="icon" href="{{ STATIC_URL }}lizard_ui/favicon.ico" type="images/x-icon" />
    <link rel="SHORTCUT ICON" href="{{ STATIC_URL }}lizard_ui/favicon.ico" />

    {% compress css %}
      {% block css %}
        {# CSS for jqueryui: "smoothness" theme #}
        <link type="text/css"
              href="{{ STATIC_URL }}jqueryui/smoothness/jquery-ui.css"
              rel="stylesheet"
              media="screen, projection" />
        {# OpenLayers: manually load the OpenLayers css so we can control the load order #}
        {# pass theme:null to the OpenLayers.Map instance to prevent OL from autoloading it #}
        <link rel="stylesheet"
              href="{{ STATIC_URL }}openlayers/theme/default/style.css"
              type="text/css"
              media="screen, projection" />
        <link rel="stylesheet"
              href="{{ STATIC_URL }}daterangepicker/daterangepicker.css"
              type="text/css"
              media="screen, projection" />
        {# Twitter bootstrap, but with an included #}
        {# lizard_ui/lizard-bootstrap.less to overrides bootstrap defaults. #}
        {# Bootstrap must be below jqueryui to avoid overriding. #}
        <link rel="stylesheet"
              href="{{ STATIC_URL }}bootstrap/less/bootstrap.css"
              type="text/css"
              media="screen, projection" />
        {# Sprites: all icons (print, info, etc) in one cacheable image. #}
        <link rel="stylesheet"
              href="{{ STATIC_URL }}sprites/sprite.css"
              type="text/css"
              media="screen, projection" />
      {% endblock css %}
    {% endcompress %}
    <!--[if IE 7]>
    <link rel="stylesheet"
          href="{{ STATIC_URL }}bootstrap/less/bootstrap-ie7.css"
          type="text/css"
          media="screen, projection" />
    <style type="text/css">
        html, body { overflow: none; }
    </style>
    <![endif]-->

    <!--[if lt IE 9]>
      {% compress css %}
        {% block ie-css %}
        {% endblock ie-css %}
      {% endcompress %}
    <![endif]-->

    {% compress js %}
      {% block javascript-in-head %}
        {# Should probably remain unused. #}
      {% endblock javascript-in-head %}
    {% endcompress %}
    {% block head-extras %}
      {# Your own totally-unmanaged per-template extra css/javascript/links #}
    {% endblock head-extras %}

    {# HTML5 shiv/shim (they are equal), for IE6-8 support of HTML elements. After the styles. #}
    <!--[if lt IE 9]>
      <script src="{{ STATIC_URL }}html5shiv/html5shiv.js"></script>
    <![endif]-->

  </head>
  <body>
	{% block modal %}
	  {% include 'lizard_ui/modal_login.html' %}
	  {% include 'lizard_ui/change_language.html' %}
	{% endblock %}
    <div id="page">
      {% block page %}
        {% block header %}
          <header>
            <div id="logo-row"
                 class="navbar">
              <div id="logo">
                {% block logo %}
                  {% spaceless %}
                    <a href="/" title='{% trans "Back to homepage" %}'>
                        <img src="{{ STATIC_URL }}lizard_ui/logo.png" alt="Lizard" />
                    </a>
                  {% endspaceless %}
                {% endblock logo %}
              </div>
              <div id="site-actions">
                {% block site-actions %}

                  {% if view.site_actions %}
                    <ul class="nav">
		      {% for action in view.site_actions %}
                        <li>
                          <a href="{{ action.url }}"
                             {% if action.description %}
                               title="{{ action.description }}"
                             {% endif %}
                             class="{{ action.klass }}"
                             {% for item in action.data_attributes.items %}
                               data-{{ item.0 }}="{{ item.1 }}"
                             {% endfor %}
                             >
                            {% if action.icon %}
                              <i class="{{ action.icon }}"></i>
                            {% endif %}
                            {{ action.name }}
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}

                {% endblock site-actions %}
              </div>
            </div>

            <div id="breadcrumb-row"
                 class="navbar">
              <div id="breadcrumbs">
                {% block breadcrumbs %}

                  {% if view.breadcrumbs_with_fallback %}
                    <ul>
                      {% for action in view.breadcrumbs_with_fallback %}
                        <li {% if action.description %}
                              title="{{ action.name }}"
                              data-content="{{ action.description }}"
                              class="has_popover"
                            {% endif %}>
                          <a href="{{ action.url }}"
                            {% if action.klass %}
                              class="{{ action.klass }}"
                            {% endif %}
                             {% for item in action.data_attributes.items %}
                               data-{{ item.0 }}="{{ item.1 }}"
                             {% endfor %}
                             >
                            {% if action.icon %}
                              <i class="{{ action.icon }}"></i>
                            {% endif %}
                            {{ action.name }}
                          </a>
                          {% if not forloop.last %}
                            &rarr;
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}

                {% endblock breadcrumbs %}
              </div>
              <div id="content-actions">
                {% block content-actions %}

                  {% if view.content_actions %}
                    <ul class="nav">
                      {% for action in view.content_actions %}
                        <li
                           {% if action.description %}
                             title="{{ action.description }}"
                           {% endif %}
                           {% for item in action.data_attributes.items %}
                             data-{{ item.0 }}="{{ item.1 }}"
                           {% endfor %}
                           >
                          <a href="{{ action.url }}"
                             class="{{ action.klass }}">
                            {% if action.icon %}
                              <i class="{{ action.icon }}"></i>
                            {% endif %}
                            <span class="action-text">
                              {{ action.name }}
                            </span>
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}

                {% endblock content-actions %}
              </div>
            </div>

          </header>
        {% endblock header %}

        {% block main-area %}
          <div id="sidebar" data-collapsed="{{ view.sidebar_is_collapsed|yesno:'true,false,false' }}">
            <div class="sidebar-inner">
              {% block sidebar %}
              {% endblock sidebar %}
            </div>
          </div>

          <div id="secondary-sidebar" data-collapsed="{{ view.secondary_sidebar_is_collapsed|yesno:'true,false,true' }}">
            <div class="sidebar-inner">
              {% block secondary-sidebar %}
              {% endblock secondary-sidebar %}
            </div>
          </div>

          <div id="content">
            {% block content %}
            {% endblock content %}
          </div>

          <div id="rightbar" data-collapsed="{{ view.rightbar_is_collapsed|yesno:'true,false,true' }}">
            <div class="sidebar-inner">
              {% block rightbar %}
              {% endblock rightbar %}
            </div>
          </div>

          <div id="footer">
            <div id="sidebar-actions">
              {% block sidebar-actions %}

                {% if view.sidebar_actions %}
                  <div class="btn-toolbar">
                    <div class="btn-group">

                      {% for action in view.sidebar_actions %}
                        <button type="button"
                          {% if action.description %}
                            title="{{ action.description }}"
                            class="btn {{ action.klass }}"
                          {% else %}
                            class="btn {{ action.klass }}"
                          {% endif %}
                          {% for item in action.data_attributes.items %}
                            data-{{ item.0 }}="{{ item.1 }}"
                          {% endfor %}
                          >
                          {% if action.icon %}
                            <i class="{{ action.icon }}"></i>
                          {% endif %}
                          {{ action.name }}
                        </button>
                      {% endfor %}

                    </div>
                  </div>
                {% endif %}

              {% endblock sidebar-actions %}
            </div>
            <div id="orthogonal-actions">
              {% block orthogonal-actions %}

                {% if view.orthogonal_action_groups %}
                  <div class="btn-toolbar">
                    {% for group in view.orthogonal_action_groups %}
                      <div class="btn-group">

                        {% for action in group %}
                          <button type="button"
                            {% if action.description %}
                              title="{{ action.description }}"
                            {% endif %}
                            class="btn {{ action.klass }}"
                            {% for item in action.data_attributes.items %}
                              data-{{ item.0 }}="{{ item.1 }}"
                            {% endfor %}
                            >
                            {% if action.icon %}
                              <i class="{{ action.icon }}"></i>
                            {% endif %}
                            {{ action.name }}
                          </button>
                        {% endfor %}
                      {% endfor %}
                    {% endif %}
                  </div>
                </div>

              {% endblock orthogonal-actions %}
            </div>

            <div id="rightbar-actions">
              {% block rightbar-actions %}

                {% if view.rightbar_actions %}
                  <div class="btn-toolbar">
                    <div class="btn-group">

                      {% for action in view.rightbar_actions %}
                        <button type="button"
                          {% if action.description %}
                            title="{{ action.description }}"
                            class="btn {{ action.klass }}"
                          {% else %}
                            class="btn {{ action.klass }}"
                          {% endif %}
                          {% for item in action.data_attributes.items %}
                            data-{{ item.0 }}="{{ item.1 }}"
                          {% endfor %}
                          >
                          {% if action.icon %}
                            <i class="{{ action.icon }}"></i>
                          {% endif %}
                          {{ action.name }}
                        </button>
                      {% endfor %}

                    </div>
                  </div>
                {% endif %}

              {% endblock rightbar-actions %}
            </div>
          </div>
        {% endblock main-area %}

      {% endblock page %}
    </div>

    {# Ajax calls need a CSRF token cookie, and this line sends one as a side effect #}
    <!-- {{ csrf_token }} -->

    {# Already minimized, stable scripts. #}
    <script src="{{ STATIC_URL }}jquery/jquery.min.js"></script>

    {# Excanvas, for IE7 and IE8 support for HTML5 Canvas. #}
    <!--[if lt IE 9]>
        <script src="{{ STATIC_URL }}jquery-flot/excanvas.min.js"></script>
    <![endif]-->

    {# Scripts whose non-minified versions have some use in development scenarios. #}
    {% if debug %}
    <script src="{{ STATIC_URL }}bootstrap/bootstrap.js"></script>
    {# speed up developing, change to OpenLayers.debug.js when we have OL troubles #}
    <script id="openlayers-script"
            src="{{ STATIC_URL }}openlayers/OpenLayers.js"
            data-openlayers-url="{{ STATIC_URL }}openlayers/"
            charset="utf-8"></script>
    <script src="{{ STATIC_URL }}jquery-json/jquery.json-2.3.js"></script>
    <script src="{{ STATIC_URL }}momentjs/moment.js"></script>
    <script src="{{ STATIC_URL }}jquery-transform/jquery.transform-0.9.3.js"></script>
    <script src="{{ STATIC_URL }}jquery-resize/jquery.ba-resize.js"></script>
    {% else %}
    <script src="{{ STATIC_URL }}bootstrap/bootstrap.min.js"></script>
    <script id="openlayers-script"
            src="{{ STATIC_URL }}openlayers/OpenLayers.js"
            data-openlayers-url="{{ STATIC_URL }}openlayers/"
            charset="utf-8"></script>
    <script src="{{ STATIC_URL }}jquery-json/jquery.json-2.3.min.js"></script>
    <script src="{{ STATIC_URL }}momentjs/moment.min.js"></script>
    <script src="{{ STATIC_URL }}jquery-transform/jquery.transform-0.9.3.min.js"></script>
    <script src="{{ STATIC_URL }}jquery-resize/jquery.ba-resize.min.js"></script>
    {% endif %}

    {% compress js %}
      {% block javascript %}
        <script src="{{ STATIC_URL }}jqueryui/jquery-ui.js"></script>
        <script src="{{ STATIC_URL }}momentjs/nl.js"></script>
        <script src="{{ STATIC_URL }}lizard_ui/csrf.js"></script>
        <script src="{{ STATIC_URL }}lizard_ui/lizard_ui.js"></script>
        <script src="{{ STATIC_URL }}jquery-treeview/jquery.treeview.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.selection.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.resize.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.navigate.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.time.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.touch.js"></script>
        <script src="{{ STATIC_URL }}jquery-flot/jquery.flot.fillbetween.js"></script>
        <script src="{{ STATIC_URL }}daterangepicker/daterangepicker.js"></script>
      {% endblock javascript %}
    {% endcompress %}

    {% block map-javascript %}
      {# For lizard-map's wms handling #}
    {% endblock map-javascript %}

    {% if google_tracking_code %}
      <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', '{{ google_tracking_code }}']);
          _gaq.push(['_trackPageview']);
          (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
          })();
      </script>
    {% endif %}

    {% if view.gauges_site_id %}
      <script type="text/javascript">
        var _gauges = _gauges || [];
        (function() {
          var t   = document.createElement('script');
          t.type  = 'text/javascript';
          t.async = true;
          t.id    = 'gauges-tracker';
          t.setAttribute('data-site-id', '{{ view.gauges_site_id }}');
          t.src = '//secure.gaug.es/track.js';
          var s = document.getElementsByTagName('script')[0];
          s.parentNode.insertBefore(t, s);
        })();
      </script>
    {% endif %}

    {% block bottom-extras %}
      {# Your own totally-unmanaged per-template extra css/javascript/links #}
    {% endblock bottom-extras %}

  </body>
</html>
