{% load staticfiles tethys_gizmos %}
<!DOCTYPE html>

{# Allows custom attributes to be added to the html tag #}
{% block htmltag %}
<!--[if IE 7]> <html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en"  class="ie ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en"  class="ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" > <!--<![endif]-->
{% endblock %}

  {# Allows custom attributes to be added to the head tag #}
  <head {% block headtag %}{% endblock %}>

    {% comment "meta explanation" %}
      Add custom meta tags to the page. Call block.super to get the default tags
      such as charset, viewport and generator.

      Example:

      {% block meta %}
        {{ block.super }}
        <meta name="description" value="My website description" />
      {% endblock %}
    {% endcomment %}

    {% block meta %}
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="generator" content="Django" />
    {% endblock %}

    {% comment "title explanation" %}
      Add a custom title to the page by extending the title block. Call block.super
      to get the default page title.

      Example:

        {% block title %}My Subtitle - {{ block.super }}{% endblock %}
    {% endcomment %}

    <title>
      {% block title %}
        {% if site_globals.site_title %}{{ site_globals.site_title }}{% else %}Tethys{% endif %}
      {% endblock %}
    </title>

    {% comment "links explanation" %}
      The links block allows you to add additional content before the stylesheets
      such as rss feeds and favicons in the same way as the meta block.
    {% endcomment %}

    {% block links %}
      {% if site_globals.favicon %}<link rel="shortcut icon" href="{{ site_globals.favicon }}" />{% endif %}
    {% endblock %}

    {% comment "styles explanation" %}
      The styles block allows you to add additional stylesheets to the page in
      the same way as the meta block. Use block.super to include the default
      stylesheets before or after your own.

      Example:

        {% block styles %}
          {{ block.super }}
          <link href="{% static 'custom/css/foo.css' %}" rel="stylesheet" />
        {% endblock %}
    {% endcomment %}

    {% block styles %}
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
      <link href="{% static 'tethys_apps/css/app_base.css' %}" rel="stylesheet" />
    {% endblock %}

    {% block global_scripts %}
      <script src="//code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
    {% endblock %}
  </head>

  {# Allows custom attributes to be added to the body tag #}
  <body {% block bodytag %}{% endblock %}>
    {% block app_content_wrapper_override %}
      <div id="app-content-wrapper" class="show-nav">
        {% block app_header_override %}
          <div id="app-header" class="clearfix">
            <div class="tethys-app-header" style="background: {{ tethys_app.color|default:'#1b95dc' }};">
              {% block app-navigation-toggle-override %}
                <a href="javascript:void(0);" class="toggle-nav">
                  <div></div>
                  <div></div>
                  <div></div>
                </a>
              {% endblock %}
              {% block app_icon_override %}
                <div class="icon-wrapper">
                  {% block app_icon %}<img src="{% static tethys_app.icon %}">{% endblock %}
                </div>
              {% endblock %}
              {% block app_title_override %}
                <div class="app-title-wrapper">
                  <span class="app-title">{% block app_title %}{{ tethys_app.name }}{% endblock %}</span>
                </div>
              {% endblock %}
              {% block exit_button_override %}
                <div class="exit-button">
                  <a href="javascript:void(0);" onclick="TETHYS_APP_BASE.exit_app('{% url 'app_library' %}');">Exit</a>
                </div>
              {% endblock %}
            </div>
          </div>
        {% endblock %}
        {% block app_content_override %}
          <div id="app-content">
            {# Off canvas navigation menu #}
            {% block app_navigation_override %}
              <div id="app-navigation">
                {% block app_navigation %}
                  <ul class="nav nav-pills nav-stacked">
                    {% block app_navigation_items %}{% endblock %}
                  </ul>
                {% endblock %}
              </div>
            {% endblock %}

            {# App content starts here #}
            <div id="inner-app-content">
              {% block app_content %}{% endblock %}

              {# App actions are fixed to the bottom #}
              {% block app_actions_override %}
                <div id="app-actions">
                  {% block app_actions %}{% endblock %}
                </div>
              {% endblock %}
            </div>
          </div>
        {% endblock %}
      </div>
    {% endblock %}

    {% comment "scripts explanation" %}
      Use this block for adding scripts. Call with block.super to include the default
      scripts.

      Example:
        {% block scripts %}
          {{ block.super }}
          <script type="text/javascript" src="{% static 'custom/js/bar.css' %}"></script>
        {% endblock %}
    {% endcomment %}

    {% block scripts %}
      <script src="{% static 'tethys_apps/vendor/cookies.js' %}" type="text/javascript"></script>
      <script src="{% static 'tethys_apps/js/app_base.js' %}" type="text/javascript"></script>
      {% gizmo_dependencies %}
    {% endblock %}
  </body>
</html>