{% extends "distributed/base_teach.html" %}

{% load i18n %}
{% load staticfiles %}

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/distributed/homepage.css' %}">
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <!-- import handlebars templates here -->
    <script src="{% url 'handlebars_templates' module_name="playlists" %}"></script>
    <script src="{% url 'handlebars_templates' module_name="contentrec" %}"></script>

    <script type="text/javascript" src="{% static 'js/backbone/backbone-helpers.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/playlist/models.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/distributed/contentrec/views.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/distributed/contentrec/models.js' %}"></script>
    {% if settings.AUTO_LOAD_TEST %}{# TODO(bcipolli): eliminate this, make the load testing app inherit from / override this page #}
    <script>
        if (window.parent.frames.length === 0) {
            window.location = "{% url 'load_test' %}";
        }

    </script>
    {% endif %}

    <script type="text/javascript">
     var ALL_PLAYLISTS_URL = "{% url 'api_dispatch_list' resource_name='playlist' %}";
     var VIEW_PLAYLIST_TEMPLATE_URL = "/playlists/view/%(playlist_id)s/";
    </script>

    <script>
        $(function() {
            if (ds.distributed.front_page_welcome_message) {
                show_message("success", ds.distributed.front_page_welcome_message);
            }
            var content_rec_load = function() {
                if (window.statusModel.is_student() && !window.hpwrapper) {
                    window.hpwrapper = new HomepageWrapper({
                        el:"#content-area"
                    });
                }
            }
            window.statusModel.listenTo(window.statusModel, "change", content_rec_load);
        });
    </script>

    <script type="text/template" id="playlist-table">
      <table class="table">
        <tr>
          <th colspan="5">
            <div class="playlist-list-header-wrapper">
              <h2 class="playlist-list-header"><%= title %></h2>
            </div>
          </th>
        </tr>
        <tr>
          <td>
            <ul id="playlists">
            </ul>
          </td>
        </tr>
      </table>
    </script>

    {% if not request.has_superuser %}
      <script type="text/javascript">
        $(function() {
          window.SuperUserCreateModalView = new SuperUserCreateModalView();
        });
      </script>
    {% endif %}
    
{% endblock headjs %}

{% block content %}
{% block subnavbar %}{{block.super}}{% endblock subnavbar %}
    <div class="container" id="content-area">

        <div class="row">
            <h2 class="main-headline hidden-xs">{{ channel_data.head_line }}</h2>
        </div>

        <div class="row">
            <div class="col-sm-4 col-sm-push-4 col-xs-10 col-xs-push-1 vertical-shadow suggested-action">
                <a href="{% url 'learn' %}">
                     <h3 class="suggested-action-title">{% trans "Learn!" %}</h3>
                     <img id="suggested-action-image-link-homepage" src="/data/{{ channel }}/images/logo_10_enlarged_2.png" alt="{% trans 'Learn with Khan Academy videos and exercises!' %}">
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12" id="homepage-p-div">
                <p class="homepage-p"><strong>{{ channel_data.tag_line }}</strong></p>
            </div>
        </div>
    </div>


{% endblock content %}
