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

<script type="text/template" id="profile-distribution-widget-template">
  <div class="profile-distribution-widget">
    <div class="header">
      <h2 class="title"> {{title}} </h2>
    </div>
    <div class="view">
      <div class="display-errors"></div>
      <div class="display-text"></div>
      <div class="display-graph"></div>
      <div class="display-table"></div>
    </div>
  </div>
</script>

%if settings.FEATURES.get('ENABLE_ANALYTICS_ACTIVE_COUNT'):
  <div class="enrollment-wrapper" style="margin-bottom: 40px;">
    <h2>${_("Active Students")}</h2>
    <span class="tip">${_("The count of students who interacted at least once by opening pages, playing videos, posting in discussions, submitting problems, or completing other activities. The date range includes all activities from midnight on the start date (inclusive) though midnight on the end date (exclusive).")}</span>
    <br/><br/>
    <span style="color: green;"><b>${ section_data['active_student_count'] }</b></span>
      for the week of (${ section_data['active_student_count_start'] } - ${ section_data['active_student_count_end'] })
  </div>
%endif

<hr>

%if settings.FEATURES['ENABLE_INSTRUCTOR_ANALYTICS']:
  <script type="text/template" id="grade-distributions-widget-template">
    <div class="grade-distributions-widget">
      <div class="header">
	<h2 class="title"> ${_("Score Distribution")} </h2>
	<p>${_("The chart below displays the score distribution for each standard problem in your class, specified by the problem's url name.")}
	  ${_("Scores are shown without weighting applied, so if your problem contains 2 questions, it will display as having a total of 2 points.")}</p>
	<br />
	${_("Problem")}: <select class="problem-selector">
          <option> ${_("Loading problem list...")} </option>
	</select>
	<div class="last-updated"></div>
      </div>
      <div class="view">
	<div class="display-errors"></div>
	<div class="display-text"></div>
	<div class="display-graph"></div>
      </div>
    </div>
  </script>

  <div class="grade-distributions-widget-container"
       data-endpoint="${ section_data['proxy_legacy_analytics_url'] }"
       >
  </div>
%endif

<hr>

<div class="profile-distribution-widget-container"
  data-title="${_("Year of Birth")}"
  data-feature="year_of_birth"
  data-endpoint="${ section_data['get_distribution_url'] }"
></div>

<hr>

<div class="profile-distribution-widget-container"
  data-title="${_("Gender Distribution")}"
  data-feature="gender"
  data-endpoint="${ section_data['get_distribution_url'] }"
></div>

<hr>

<div class="profile-distribution-widget-container"
  data-title="${_("Level of Education")}"
  data-feature="level_of_education"
  data-endpoint="${ section_data['get_distribution_url'] }"
></div>
