{% load utility i18n %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <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, maximum-scale=1.0, user-scalable=no" />
    <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" />
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Roboto+Condensed:300italic,400italic,700italic,400,300,700|Roboto+Slab'
          rel='stylesheet'
          type='text/css'>

    {% block css %}
      {# jqueryui: "smoothness" theme #}
      <link type="text/css"
            href="{{ STATIC_URL }}jqueryui/smoothness/jquery-ui.css"
            rel="stylesheet" />
      {# 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 #}
      <script type="text/javascript">
          if((navigator.userAgent.toLowerCase().indexOf("ipad") > -1) ||
             (navigator.userAgent.toLowerCase().indexOf("iphone") > -1)) {
	      document.write('<link rel="stylesheet" href="{{ STATIC_URL }}openlayers/1.13.1/theme/default/style.css" type="text/css" />');
	  } else {
	      document.write('<link rel="stylesheet" href="{{ STATIC_URL }}openlayers/1.12-r7/theme/default/style.css" type="text/css" />');
	  }
      </script>
      {# daterangepicker #}
      <link rel="stylesheet"
            href="{{ STATIC_URL }}daterangepicker/daterangepicker.css"
            type="text/css" />
      {# Twitter bootstrap, but with an included #}
      {# lizard-bootstrap.less to overrides bootstrap defaults. #}
      {# Bootstrap must be below jqueryui to avoid overriding. #}
      <link rel="stylesheet"
            href="{{ STATIC_URL }}bootstrap/bootstrap/css/bootstrap.css"
            type="text/css" />
      {# 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" />
      {# Used for the Lizard Awesome box (aka new google maps) #}
      <link rel="stylesheet"
            href="{{ STATIC_URL }}lizard_ui/box-awesome.css"
            type="text/css"
            media="screen, projection" />
      <link rel="stylesheet"
	    href="{{ STATIC_URL }}bootstrap-tour/bootstrap-tour.min.css"
	    type="text/css"
	    media="screen, projection" />

    {% endblock css %}

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

    {% block javascript-in-head %}
      {# Should probably remain unused. #}
    {% endblock javascript-in-head %}

    {% block head-extras %}
      {# Your own totally-unmanaged per-template extra css/javascript/links #}
    {% endblock head-extras %}
  </head>
  <body {% block inside-body-tag-itself %}{% endblock %}>
    {% block modal %}
      {% include 'lizard_ui/modal_login.html' %}
      {% include 'lizard_ui/change_language.html' %}
    {% endblock %}

    {% block awesome %}
      <div id="box-awesome">
	<form id="box-awesome-search-form">
	  <div id="box-awesome-search">
	    <input type="text">
	    <button class="icon-search" aria-label="Search">
	    </button>
	  </div>
	</form>
	<div id="box-awesome-tabs">
	  <ul class="nav nav-tabs">
	    <li class="active">
	      <a href="#box-awesome-content-themes"
		 data-toggle="tab"
		 title="{% trans 'Topic maps' %}">
		<i class="icon-star"></i>
	      </a>
	    </li>
	    <li>
	      <a href="#box-awesome-content-legend"
		 data-toggle="tab"
		 title="{% trans 'Legend' %}">
		<img src="{{ STATIC_URL }}lizard_ui/icon-legend.png"
                     style="margin-top:-3px;" />
	      </a>
	    </li>
	    <li>
	      <a id="elevation-profile-action"
		 href="#box-awesome-content-elevationprofile"
		 data-toggle="tab"
		 title="{% trans 'Profile' %}">
		<img src="{{ STATIC_URL }}lizard_ui/icon-chart.png"
                     style="margin-top:-3px;" />
	      </a>
	    </li>
	    <li>
	      <a href="#box-awesome-content-apps"
		 data-toggle="tab"
		 title="{% trans 'Apps'%}"
		 id="box-awesome-app-tab">
		<i class="icon-th"></i>
	      </a>
	    </li>
	  </ul>
	  <div id="box-awesome-content"
	       class="tab-content">
	    <div id="box-awesome-content-themes"
		 class="tab-pane sidebar-inner active">
              {% block sidebar2 %}
              {% endblock sidebar2 %}
	    </div>
	    <div id="box-awesome-content-legend"
		 class="tab-pane sidebar-inner">
	      {% block rightbar %}
              {% endblock rightbar %}
	    </div>
	    <div id="box-awesome-content-elevationprofile"
		 class="tab-pane sidebar-inner">
	      <p>
		{% trans 'Draw a line on the map.' %}
	      </p>
	      <div style="position:relative">
		<div id="elevation-profile-content"
                     style="height:192px">
		</div>
	      </div>
	    </div>
	    <div id="box-awesome-content-apps"
		 class="tab-pane sidebar-inner">
	      <div id="apps-back-button">
	      </div>
	      {% block sidebar %}
	      {% endblock %}
	    </div>
	  </div>
	</div>
	<div id="box-awesome-results"
             style="display:none">
	  <button type="button" class="close">&times;</button>
	  <div>
	    {# comment Placeholder for the search results. #}
	  </div>
	</div>
      </div>
    {% endblock awesome %}

    <div id="page">
      {% block page %}

      {# Note: KEEP ME #}
      {% block secondary-sidebar %}
      {% endblock %}

      {% 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>
		  {% if view.customer_logo %}
  		    <img src="{{ MEDIA_URL }}{{ view.customer_logo }}"/>
		  {% endif %}
                {% 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 {% if action.element_id %}
                          id="{{ action.element_id }}"
                          {% endif %}>
                        <a href="{{ action.url }}"
                           {% if action.description %}
                             data-title="{{ action.name }}"
                             data-content="{{ action.description }}"
                           {% endif %}
                           {% if action.target %}
                             target="{{ action.target }}"
                           {% 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>
          {% comment breadcrumb %}
            <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 %}
                            {% if action.element_id %}
                              id="{{ action.element_id }}"
                            {% 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 pull-right">
                      {% 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 %}
                            {% if action.element_id %}
                              id="{{ action.element_id }}"
                            {% endif %}
                            >
                          <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>
          {% endcomment %}
        </header>
      {% endblock header %}

      {% comment %}
        Note: keep the following inline style tags! These are controlled by JavaScript
        and not by the CSS, so they are inline by definition.
      {% endcomment %}

      {% block main-area %}
        <div id="content">
          {% block content %}
          {% endblock content %}
        </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 }} -->

    {% block javascript %}
      <script src="{{ STATIC_URL }}jquery/jquery.min.js"></script>
      <script src="{{ STATIC_URL }}jquery-mobile-events/jquery.mobile-events.min.js"></script>
      <script type="text/javascript" src="{% url "django.views.i18n.javascript_catalog" %}"></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]-->

      <script src="{{ STATIC_URL }}bootstrap/bootstrap/js/bootstrap.min.js"></script>
      <script type="text/javascript">
	if((navigator.userAgent.toLowerCase().indexOf("ipad") > -1) ||
           (navigator.userAgent.toLowerCase().indexOf("iphone") > -1)) {
	    document.write('<script id="openlayers-script" src="{{ STATIC_URL }}openlayers/1.13.1/OpenLayers.js" data-openlayers-url="{{ STATIC_URL }}openlayers/1.13.1/" charset="utf-8"></sc' + 'ript>');
	} else {
	    document.write('<script id="openlayers-script" src="{{ STATIC_URL }}openlayers/1.12-r7/OpenLayers.js" data-openlayers-url="{{ STATIC_URL }}openlayers/1.12-r7/" charset="utf-8"></sc' + 'ript>');
	}
      </script>
      {# Note that weird + madness inside the closing scirpt tag above... #}
      {# See http://stackoverflow.com/q/236073/27401 #}
      <script src="{{ STATIC_URL }}jquery-json/jquery.json-2.3.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/lang/nl.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>

      <script src="{{ STATIC_URL }}jqueryui/jquery-ui.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>
      <script src="{{ STATIC_URL }}lizard_elevationprofile/elevationprofile.js"></script>
      <script src="{{ STATIC_URL }}bootstrap-tour/bootstrap-tour.min.js"></script>

    {% endblock javascript %}

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

    {% if view.google_tracking_code %}
      <script type="text/javascript">
          var _gaq = _gaq || [];
          _gaq.push(['_setAccount', '{{ view.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>
