<!DOCTYPE HTML>
{% load staticfiles %}
{% load i18n %}
{% load i18n_filters %}
{% load my_filters %}

{% get_current_language as lang_code %}
<html lang="{{ lang_code }}">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="wot-verification" content="075abe861486e6bb3ab9"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        {% block titletag %}
        <title>{% block title %}{% trans "Welcome" %}{% trans title %}{% endblock title %} | KA Lite</title>
        {% endblock %}

        <link href="{% static "fonts/style.css" %}" rel="stylesheet" type="text/css">

        <!-- CSS for dynamic settings -->
        <link rel="stylesheet" type="text/css" href="{% url 'dynamic_css' %}">

        {% block headcss %}{% endblock headcss %}
        <link rel="shortcut icon" href="{% static "images/distributed/favicon.ico" %}">

        <script type="text/javascript" src="{% url 'dynamic_js' %}"></script>

        {% if request.in_context_localized %}
            <script type="text/javascript">
              var _jipt = [];
              _jipt.push(['project', 'ka-lite']);
            </script>
            <script type="text/javascript" src="//cdn.crowdin.com/jipt/jipt.js"></script>
        {% endif %}

        {% if settings.DEBUG %}
        <script src="{% url 'js_reverse' %}" type="text/javascript"></script>
        {% else %}
        <script src="{% static 'django_js_reverse/js/reverse.js' %}"></script>
        {% endif %}

        <!-- JS translation file statically included as a back-up, so that if the saved file below isn't available, we don't choke. -->
        <script type="text/javascript" src="{% static 'js/i18n/en.js' %}"></script>

        {% if current_language != "en" %}
            <!-- JS translation files dynamically generated by django, then saved to the static file below -->
            <script type="text/javascript" src="{{ settings.CONTENT_URL }}locale/js/i18n/{{ request.language }}.js"></script>
        {% endif %}

        <script src="{% static 'js/distributed/bundles/bundle_common.js' %}"></script>
        <script src="{% static 'js/distributed/bundles/bundle_base.js' %}"></script>

        {% if settings.INCLUDE_QTIP %}
            <script src="{% static 'js/distributed/bundles/bundle_qtip.js' %}"></script>
        {% endif %}

        <script>
        window.sessionModel.set({
          USER_URL                    : "{% url 'api_dispatch_list' resource_name='user' %}",

          STATIC_URL                  : "{% static "" %}",

          ALL_ASSESSMENT_ITEMS_URL    : "{% url 'api_dispatch_list' resource_name='assessment_item' %}",
          GET_VIDEO_LOGS_URL          : "{% url 'api_dispatch_list' resource_name='videolog' %}",
          GET_EXERCISE_LOGS_URL       : "{% url 'api_dispatch_list' resource_name='exerciselog' %}",
          GET_CONTENT_LOGS_URL        : "{% url 'api_dispatch_list' resource_name='contentlog' %}",

          KHAN_EXERCISES_URL : "{% static 'js/distributed/perseus/ke/' %}",

          CENTRAL_SERVER_HOST         : "{{ central_server_host }}",
          SECURESYNC_PROTOCOL         : "{{ securesync_protocol }}",
          CURRENT_LANGUAGE            : "{{ current_language }}",
          CHANNEL                     : "{{ channel }}"
        });
        </script>

        {% block headjs %}{% endblock headjs %}
        {% block analytics %}{% endblock analytics %}

        {% if inline_help %}
        <!-- inline help, introjs -->
        <script type="text/javascript" src="{% static 'js/inline/bundle_modules/inline_help.js' %}"></script>
        {% endif %}
    </head>

    <body class="{% block bodyclass %}{% endblock %}">
        <div id="wrapper">

            {# Header / Navbar #}
            <div class="navbar kalite-navbar header-footer-bg" role="banner">
              <div class="container">
                  <div class="row">
                      <div class="navbar-header">
                          {# collapse entire menu #}
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-hidden="true" id="navbar_toggle">
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                              <span class="icon-bar"></span>
                          </button>
                          <div class="navbar-brand">
                              <a href="{% url 'homepage' %}" title="{{ channel_data.channel_name }} {% trans 'Home' %}">
                                  <img src="/data/{{ channel }}/images/horizontal-logo-small.png" alt="{{ channel_data.channel_name }} {% trans 'logo' %}">
                              </a>
                              <div class="pull-right visible-xs sitepoint" id="points-xs"></div>
                          </div>

                      </div>

                      <div class="collapse navbar-collapse top-nav" role="navigation" aria-label="Main menu">
                          <ul class="nav navbar-nav navbar-right nav-tabs" id="topnav" role="tablist"></ul>
                      </div>

                    </div>
                </div>
            </div>
          {# End Header / Navbar #}

            {# Body #}
            <div id="content-container" class="container" role="main">
                {% block outer_content %}
                    {% block precontent %}
                        {% include "distributed/partials/_messages.html" %}
                    {% endblock precontent %}
                    {% block content %}
                        {% block subnavbar %}{% endblock subnavbar %}
                    {% endblock content %}
                {% endblock outer_content %}
            </div>
        </div> {# End wrapper #}
        {# Footer #}
        {% include "distributed/partials/_footer.html" %}
    </body>

</html>
