{% load staticfiles %}
{% load compress %}

{% load opalplugins %}
{% load gifs %}
<!doctype html>
{% block angulardefinition %}
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="{% block ngapp %}opal{% endblock %}" ng-controller="RootCtrl" ng-keydown="keydown($event)">
{% endblock %}
  <head>

	<!--[if lte IE 8]>
		<script type="text/javascript" src="{% static "js/utils/json3.min.js" %}"></script>
		<![endif]-->
	<meta charset="utf-8">
	<title>{{brand_name}}</title>

    {% compress js %}
    {% core_javascripts 'opal.upstream.deps' %}
    {% plugin_javascripts 'opal.upstream.deps' %}
    {% plugin_opal_angular_deps %}
    {% plugin_opal_angular_tracking_exclude %}

    <script type="text/javascript">
      var initials = "{{request.user.first_name|slice:":1"}} {{request.user.last_name}}"
      var settings = {
      LOG_OUT_DURATION: {{OPAL_LOG_OUT_DURATION}}
      }
      {% if GLOSSOLALIA_URL %}
      settings.GLOSSOLALIA_URL = '{{ GLOSSOLALIA_URL }}';
      settings.BROADCAST_ENDPONT = settings.GLOSSOLALIA_URL.replace('http', 'ws') + 'ws';
      {% endif %}
      var version = '{{VERSION_NUMBER}}';
    </script>
    <!-- google analytics -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      {% if OPAL_ANALYTICS_NODOMAIN %}
      ga('create', '{{ OPAL_ANALYTICS_ID }}', {
      'cookieDomain': 'none'
      });
      {% else %}
      ga('create', '{{ OPAL_ANALYTICS_ID }}', 'auto');
      {% endif %}
    </script>



    {% core_javascripts 'opal.utils' %}

    {% core_javascripts 'opal.services' %}
    {% plugin_javascripts 'opal.services' %}
    {% core_javascripts 'opal.controllers' %}
    {% plugin_javascripts 'opal.controllers' %}

    {% block angularapp %}
	<script type="text/javascript" src="{% static "js/opal/app.js" %}"></script>
	<script type="text/javascript" src="{% static "js/opal/routes.js" %}"></script>
    {% endblock %}

    {% application_javascripts %}
    <script type="text/javascript" src="{% static "js/opal/timer.js" %}"></script>
    {% endcompress %}

    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,700' rel='stylesheet' type='text/css'>
    <link href="{% static "js/c3-0.2.5/c3.css" %}" rel="stylesheet" media="all">
	<link href="{% static "bootstrap-3.1.0/css/bootstrap.css" %}" rel="stylesheet" media="all">
	<link href="{% static "css/select.css" %}" rel="stylesheet" media="all">
	<link href="{% static "css/bootstrap-datepicker.css" %}" rel="stylesheet" media="all">
	<link href="{% static "css/font-awesome/css/font-awesome.css" %}" rel="stylesheet" media="all">
	<link href="{% static "css/awesome-bootstrap-checkbox.css" %}" rel="stylesheet" media="all">
    <link href="{% static "css/ngprogress-lite.css" %}" rel="stylesheet" media="screen">
	<link href="{% static "js/bower_components/angular-growl-v2/build/angular-growl.css" %}" rel="stylesheet" media="screen">

    {% compress css %}

	<link href="{% static "css/opal.css" %}" rel="stylesheet" media="all">
    {% endcompress %}
    <link href="{% static "css/print.css" %}" rel="stylesheet" media="print">
    <link href="{% static "css/screen.css" %}" rel="stylesheet" media="screen">

    {% plugin_stylesheets %}

    <link rel="shortcut icon" href="{% static 'img/ohc-icon.png' %}">

    <script id="templates/growl/growl.html" type="text/ng-template">
      <div class="growl-container" ng-class="wrapperClasses()">
        <div class="growl-item alert" ng-repeat="message in growlMessages.directives[referenceId].messages" ng-class="alertClasses(message)" ng-click="stopTimeoutClose(message)">
          <button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="growlMessages.deleteMessage(message)" ng-show="!message.disableCloseButton">&times;</button>
          <h4 class="growl-title" ng-show="message.title" ng-bind="message.title"></h4>
          <div class="growl-message" ng-bind-html="message.text"></div>
        </div>
      </div>
    </script>

    {% plugin_head_extra %}

  </head>
  <body>
    {% if OPAL_EXTRA_HEADER %}{% include OPAL_EXTRA_HEADER %}{% endif %}
    {% block navbar %}{% include 'navbar.html' %}{% endblock %}
    {% block content %}
	<div class="outer-container" ng-view autoscroll="true" ng-hide="ready==false"></div>
    {% endblock %}
    {% include 'logout_modal.html' %}
    <div growl></div>

    {% block loading %}
    <div class="loading screen-only">
      <div class="loading-inner">
        <p>
          {% loading_gif %}
        </p>
        <p class="lead">
          <strong>
            Loading...
          </strong>
        </p>
      </div>
    </div>
    {% endblock %}

  </body>
</html>
