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

<html>
    <head>
        <!--[if lt IE 9]>
              <script src="{% static "js/html5shiv.js" %}"></script>
        <![endif]-->

        <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 rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui/jquery-ui.min.css' True %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' True %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/distributed/bootstrap-overrides.css' True %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/distributed/khan-site.css' True %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/distributed/khan-lite.css' True %}">
        <link href="{% static "fonts/style.css" %}" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="{% static 'css/distributed/search_autocomplete.css' True %}">
        <link rel="stylesheet" type="text/css" href="{% static 'css/jquery.qtip.min.css' True %}">

        <!-- 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" %}">
        {# In some versions of IE, console isn't defined, which can lead to JS errors #}
        <script type="text/javascript">
            window.console = window.console || {log: function() {}};
        </script>

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

        {# Older versions of IE didn't have a JSON object, so this library adds it back in if needed #}
        <script type="text/javascript" src="{% static 'js/json2.js' %}"></script>
        <!-- JS translation file statically included as a back-up, so that if the saved file below isn't available, we don't choke. -->
        {% if current_language != "en" %}
        <script type="text/javascript" src="{% static 'js/i18n/en.js' %}"></script>
        {% endif %}

        {% 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 %}

        <!-- JS translation files dynamically generated by django, then saved to the static file below -->
        <script type="text/javascript" src="{% static 'js/i18n/'|add:request.language|add:'.js' True %}"></script>

        {# Use JS to help IE5.5-IE8 support modern browser features, especially for CSS and PNGs #}
        <!--[if lt IE 8]>
        {# <script src="{% static "js/IE8.js" %}"></script> #}
        <![endif]-->

        <script type="text/javascript">
            window.onerror=function(msg){
                window.js_errors = window.js_errors || [];
                window.js_errors.push(msg);
            }
        </script>
        {% block jqueryjs %}
        <script type="text/javascript" src="{% static 'js/jquery-1.9.1.min.js' %}"></script>
        <script type="text/javascript">
            jQuery.migrateMute = {% if settings.DEBUG %}false{% else %}true{% endif %};
        </script>
        {% endblock jqueryjs %}
        <script type="text/javascript" src="{% static 'js/fastclick.js' %}"></script>
        <script>
        $(function() {
            FastClick.attach(document.body);
        });
        </script>
        <script type="text/javascript" src="{% static 'js/underscore-min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/backbone/backbone.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/backbone/backbone-tastypie.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/backbone/backbone-helpers.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery-ui/jquery-ui.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.ui.touch-punch.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>

        <script>
         // the following variables are used by functions in distributed-server.js,
         //    khan-lite.js, and search_autocomplete.js.
         // TODO(jamalex): include these in some Backbone Model state instead, synced via AJAX
         var INSTALLED_LANGUAGES_URL     = "{% url 'installed_language_packs' %}";
         var SEARCH_TOPICS_URL           = "{% url 'flat_topic_tree' lang_code=current_language %}";
         var STATUS_URL                  = "{% url 'status' %}";
         var FORCE_SYNC_URL              = "{% url 'api_force_sync' %}";

         var LOCAL_DEVICE_MANAGEMENT_URL = "{% url 'device_redirect' %}";
         var USER_LOGIN_URL              = "{% url 'login' %}";
         var SET_DEFAULT_LANGUAGE_URL    = "{% url 'set_default_language' %}";
         var DELETE_USERS_URL            = "{% url 'delete_users' %}";
         var DELETE_GROUPS_URL           = "{% url 'group_delete' %}";
         var MOVE_TO_GROUP_URL           = "{% url 'move_to_group' %}";
         var STATIC_URL                  = "{% static "" True %}"; // pass "True" to avoid build id being appended

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

         var KHAN_EXERCISES_SCRIPT_URL = "{% static 'perseus/ke/khan-exercise.js' %}";

         var SERVER_INFO_PATH            = "{% url 'get_server_info' %}";
         var CENTRAL_SERVER_HOST         = "{{ central_server_host }}";
         var SECURESYNC_PROTOCOL         = "{{ securesync_protocol }}";
         var CURRENT_LANGUAGE            = "{{ current_language }}";

        </script>
        <script type="text/javascript" src="{% static 'js/sprintf.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/purl.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/modernizr.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.ui.autocomplete.html.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/khan-lite.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/distributed/distributed-server.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/distributed/search_autocomplete.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery.qtip.min.js' %}"></script>

        <!-- Imports for handlebars, our JS templating engine -->
        <script src="{% static "js/handlebars/handlebars-v1.3.0.js" %}"></script>
        <script src="{% static "js/handlebars/handlebars-helpers.js" %}"></script>
        <script src="{% static "js/handlebars/handlebars-wrapper.js" %}"></script>

        {# Trigger tooltips for help icons #}
        <script>
            $(function(){
                $('.help-tooltip').tooltip({
                    trigger: "hover click"
                });
            });
        </script>

        {% block headjs %}{% endblock headjs %}
        {% block analytics %}{% endblock analytics %}
    </head>

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

            {# Header & Navbar #}
            <div class="navbar kalite-navbar header-footer-bg">
              <div class="container">
                  <div class="row">
                      <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                              <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">
                          <ul class="nav navbar-nav navbar-right nav-tabs " role="tablist">

                            <!-- For all users -->
                              {# Search box for responsive nav #}
                              <div class="visible-xs">
                                  <li id="search_input">
                                      <form class="navbar-form " action="{% url 'search' %}" method="get"  role="search">
                                          {% comment %}translators: this will appear in the navigation bar. please try to keep it as short as possible.{% endcomment %}
                                          <input type="text" name="query" id="search_box" class="form-control pull-left" placeholder="{% trans 'Topic, video, exercise...' %}" />
                                          <button class="btn btn-default" id="search_btn" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                      </form>
                                  </li>
                              </div>

                            {# Search box for normal nav #}
                            <li class="hidden-xs">
                              <form class="navbar-form" action="{% url 'search' %}" method="get" id="search-box" role="search">
                                {% comment %}translators: this will appear in the navigation bar. please try to keep it as short as possible.{% endcomment %}
                                <div class="input-group">
                                  <input type="text" name="query" id="search" class="form-control" placeholder="{% trans 'Topic, video, exercise...' %}" />
                                  <button id="search-button" class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                                </div>
                              </form>
                            </li>
                            <!-- End for all users -->

                            <!-- For logged in admins -->
                            {% if request.is_admin and is_config_package_nalanda and not request.session.facility_user.facility %}
                              {# Teach for admins => assigning playlists for Nalanda #}
                              <li class="{% block teach_active_admins-nalanda %}{% endblock teach_active_admins-nalanda %}">
                                <a href="{% url 'assign_playlists' %}" id="nav_coachreports" class="admin-only">
                                  {% trans "Teach" %}
                                </a>
                              </li>
                            {% endif %}
                            {% if request.is_admin and not request.session.facility_user.facility and not is_config_package_nalanda %}
                              {# Teach for admins => coachreports #}
                              <li class="{% block teach_active_admins %}{% endblock teach_active_admins %}">
                                <a href="{% url 'tabular_view' %}" id="nav_coachreports" class="admin-only">
                                  {% trans "Teach" %}
                                </a>
                              </li>
                            {% endif %}

                            {# Manage for admins => zone control panel #}
                            {% if request.is_django_user %}
                            <li class="{% block manage_active_admins %}{% endblock manage_active_admins %}">
                              <a href="{% url 'zone_redirect' %}" id="manage" class="admin-only">
                                {% trans "Manage" %}
                              </a>
                            </li>
                            {% endif %}
                            <!-- End for logged in admins -->

                            <!-- For logged in teachers -->
                            {# Teach for teachers => coachreports #}
                            <li class="{% block teach_active_teachers %}{% endblock teach_active_teachers %}">
                              <a href="{% url 'tabular_view' %}" id="nav_coachreports" class="teacher-only">
                                {% trans "Teach" %}
                              </a>
                            </li>

                            {# Manage for teachers => facility management #}
                            {% if request.session.facility_user.facility %}
                              <li class="{% block manage_active_teachers %}{% endblock manage_active_teachers %}">
                                <a href="{% url 'facility_management' zone_id=None facility_id=request.session.facility_user.facility.id %}" id="manage" class="teacher-only">
                                  {% trans "Manage" %}
                                </a>
                              </li>
                            {% endif %}
                            <!-- End for logged in teachers -->

                            <!-- Universal Learn tab -->
                            {# Learn for all #}
                            <li class="{% block learn_active %}{% endblock learn_active %}">
                              <a href="{% url 'learn' %}" id="nav_learn" class="home-navlink">
                                {% trans "Learn" %}
                              </a>
                            </li>

                            <!-- For logged out users  -->
                            {# Login #}
                            <li class="{% block login_active %}{% endblock login_active %}">
                              <a href="{% url 'login' %}" id="nav_login" class="not-logged-in-only" title="{% trans 'Login' %}">
                                {% trans "Login" %}
                              </a>
                            </li>

                            {% if not restricted %}
                              <li class="{% block signup_active %}{% endblock signup_active %}">
                                <a href="{% url 'facility_user_signup' %}" id="nav_signup" class="not-logged-in-only" title="{% trans 'Register to start tracking your progress' %}">
                                  {% trans "Sign Up" %}
                                </a>
                              </li>
                            {% endif %}
                            
                            <!-- Farthest right nav is logged in user dropdown -->
                            <li class="dropdown {% block help_active %}{% endblock help_active %}{% block progress_active %}{% endblock progress_active %}" id="user-name">
                              <a href="#" class="logged-in-only dropdown-toggle" data-toggle="dropdown">
                                  <span id="username">
                                    <!-- Username injected here w/ js -->
                                  </span>
                                <span class="caret"></span>
                              </a>

                              <ul class="dropdown-menu" data-no-collapse="true" role="menu">
                                <li class="student-only" role="presentation">
                                  <span class="student-only" id="points">
                                    <!-- Points injected here w/ js -->
                                  </span>
                                </li>
                                <li role="presentation" class="divider student-only"></li>
                                {# Student account management #}
                                <li role="presentation" class="motivational-feature student-only">
                                  <a role="menuitem" tabindex="-1" href="{% url 'account_management' %}" id="nav_progress" title="{% trans 'My Progress'%}" class="student-only">
                                    {% trans "My Progress" %}
                                  </a>
                                </li>
                                <!-- TODO-BLOCKER(jamalex): re-enable these links once non-playlist "my progress" works, and help link is meaningful again -->
                                <!--
                                <li role="presentation">
                                  <a role="menuitem" tabindex="-1" href="{% url 'help' %}" id="nav_help">{% trans "Help" %}</a>
                                </li> -->
                                <li role="presentation" class="divider student-only"></li>
                                <!-- Logout goes at the bottom! -->
                                <li role="presentation">
                                  <a role="menuitem" tabindex="-1" id="nav_logout" class="logged-in-only" title="{% trans 'Logout'%}" href="{% url 'logout' %}">
                                    {% trans "Logout" %}
                                  </a>
                                </li>
                              </ul>
                            </li>

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

            {# Body #}
            <div id="content-container" class="container">
                {% 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>
