<%! from django.utils.translation import ugettext as _ %>
<%page args="section_data"/>

<script>
	${d3_stacked_bar_graph.body()}
</script>

  %if not any (section_data.values()):
    <p>${_("There is no data available to display at this time.")}</p>
  %else:
    <%namespace name="d3_stacked_bar_graph" file="/class_dashboard/d3_stacked_bar_graph.js"/>
    <%namespace name="all_section_metrics" file="/class_dashboard/all_section_metrics.js"/>
    
    <h3 class="attention" id="graph_load">${_("Loading the latest graphs for you; depending on your class size, this may take a few minutes.")}</h3>
    <input type="button" id="graph_reload" value="${_("Reload Graphs")}" />

    %for i in range(0,len(section_data['sub_section_display_name'])):
        <div class="metrics-container" id="metrics_section_${i}">
          <h2>${_("Section:")} ${section_data['sub_section_display_name'][i]}</h2>
          <div class="metrics-tooltip" id="metric_tooltip_${i}"></div>
          <div class="metrics-left" id="metric_opened_${i}">
            <h3>${_("Count of Students Opened a Subsection")}</h3>
          </div>
          <div class="metrics-right" id="metric_grade_${i}" data-section-has-problem=${section_data['section_has_problem'][i]}>
            <h3>${_("Grade Distribution per Problem")}</h3>
          </div>
        </div>
    %endfor
      <script>
      	$(function () {
      		var firstLoad = true;

            loadGraphs = function() {
              $('#graph_load').show();
              $('#graph_reload').hide();
              $('.loading').remove();

              var nothingText = "${_('There are no problems in this section.')}";
              var loadingText = "${_('Loading...')}";
      		  var nothingP = '<p class="nothing">' + nothingText  + '</p>';
              var loading = '<p class="loading"><i class="icon-spinner icon-spin icon-large"></i>' + loadingText + '</p>';

              $('.metrics-left').each(function() {
                $(this).append(loading);
              });
              $('.metrics-right p.nothing').remove();
              $('.metrics-right').each(function() {
                if ($(this).data('section-has-problem') === "False") {
                  $(this).append(nothingP);
                } else {
                  $(this).append(loading);
                }
              });
              $('.metrics-left svg, .metrics-right svg').remove();

              ${all_section_metrics.body("metric_opened_","metric_grade_","metric_attempts_","metric_tooltip_",course.id)}

              setTimeout(function() {
                $('#graph_load, #graph_reload').toggle();
              }, 5000);
            }

         	$('.instructor-nav a').click(function () {
				if ($(this).data('section') === "metrics" && firstLoad) {
	      			loadGraphs();
	      			firstLoad = false;
	      		}
	   		});

            $('#graph_reload').click(function () {
                loadGraphs();
	   		});

	   		if (window.location.hash === "#view-metrics") {
	   			$('.instructor-nav a[data-section="metrics"]').click();
	   		}
	   	});
      </script>

  %endif
