## mako

<%inherit file="/course_dashboard/base_course.html" />

<%! from django.core.urlresolvers import reverse %>
<%! from django.utils.translation import ugettext as _ %>

<%block name="extra_head">
    <link rel="stylesheet" href="${STATIC_URL}course_dashboard/problem_stats/jstree/themes/proton/style.min.css" />
    <style>
     #content #left-panel {
         overflow : hidden;
         border-right: thin double grey;
         max-height : 620px;
         overflow-y: auto;
     }
     
     #content li[category="problem"] {
         color : green;
     }
     
     #content .glyphicon-chevron-left, #content .glyphicon-chevron-right {
         color : green;
         font-size: 20px;
         cursor: pointer;
     }
     
     #content #show-left-panel {
         visibility: hidden;
         float : left;
     }
     
     #content #hide-left-panel, #content #generate-raw-data {
         float : right;
     }
     
     #content #problem-stat-header {
         margin-bottom : 35px;
     }
     
     #content #refresh-button {
         visibility: hidden;
         float: right;
     }
     
     #content #loading-message {
         visibility: hidden;
     }
     
     #content #ajax-load-img {
         margin-left : 5px;
     }
     .container {
         width : auto;
     }
    </style>
    
</%block>
<%block name="extra_js">
    <script src="${STATIC_URL}course_dashboard/problem_stats/jstree/jstree.min.js"></script>
    <script src="${STATIC_URL}course_dashboard/problem_stats/utils.js"></script>
    <script src="${STATIC_URL}fun/js/vendor/jquery.flot.pie.js"></script>
    <script>
        build_json_tree(${course_tree_data}); 
    </script>
</%block>

<%block name="content">
    
    <div class="row">
        <div id="left-panel" class="col-xs-4">
            <span id='hide-left-panel' class='glyphicon glyphicon-chevron-left'> </span>
            <div  id="course-tree"></div>
        </div>
        <div id="right-panel" class="col-xs-8">
            <div id="problem-stat-header">
                <span id='show-left-panel' class='glyphicon glyphicon-chevron-right'> </span>
                <a  hidden id='generate-raw-data' href=''>${_("Download raw CSV data")}</a>
                <div id='loading-message'>
                    <p>
                        ${_("Please wait while data is being loaded.")}
                        <img src='${STATIC_URL}fun/images/spinner.gif' id='ajax-load-img' alt='ajax loading button'>
                    </p>
                </div>
            </div>
            <div id="problem-stat">
            </div>
            <div id="problem-stat-footer">
                <button  type="button" id="refresh-button" data-loading-text="${_("Loading ...")}" class="btn btn-success" autocomplete="off">
                    ${_("Refresh")}
                </button>
            </div>
        </div>
    </div>

</%block>