<%inherit file="/main.html" />
<%! from django.core.urlresolvers import reverse %>
<%namespace name='static' file='/static_content.html'/>

<%block name="js_extra">
  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}"></script>
  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.stack.js')}"></script>
  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.symbol.js')}"></script>
  <script type="text/javascript" src="${static.url('js/jquery.gradebook.js')}"></script>
</%block>

<%block name="headextra">
  <%static:css group='course'/>

  <style type="text/css">
  % for (grade, _), color in zip(ordered_grades, ['green', 'Chocolate']):
  .grade_${grade} {color:${color};}
  % endfor
  % for (grade, _) in ordered_grades[2:]:
  .grade_${grade} {color:DarkSlateGray;}
  % endfor
  .grade_F {color:DimGray;}
  .grade_None {color:LightGray;}
  </style>

  <script type="text/javascript">
    $(document).ready(function() {
      var gradebook = new Gradebook($('.gradebook-content'));
    });
  </script>

</%block>

<%include file="/courseware/course_navigation.html" args="active_page=''" />

<section class="container">
<div class="gradebook-wrapper">
  <section class="gradebook-content">
    <h1>Gradebook</h1>

    <table class="student-table">
      <thead>
        <tr>
          <th>
            <form class="student-search">
              <input type="search" class="student-search-field" placeholder="Search students" />
            </form>
          </th>
        </tr>
      </thead>
      <tbody>
        %for student in students:
        <tr>
          <td>
            <a href="${reverse('student_progress', kwargs=dict(course_id=course_id, student_id=student['id']))}">${student['username']}</a>
          </td>
        </tr>
        %endfor
      </tbody>
    </table>



    %if len(students) > 0:
    <div class="grades">
      <table class="grade-table">
        <%
        templateSummary = students[0]['grade_summary']
        %>
        <thead>
          <tr> <!-- Header Row -->
            %for section in templateSummary['section_breakdown']:
              <th><div class="assignment-label">${section['label']}</div></th>
            %endfor
            <th><div class="assignment-label">Total</div></th>
          </tr>
        </thead>

        <%def name="percent_data(fraction)">
          <%
            letter_grade = 'None'
            if fraction > 0:
              letter_grade = 'F'
              for (grade, cutoff) in ordered_grades:
                if fraction >= cutoff:
                  letter_grade = grade
                  break

            data_class = "grade_" + letter_grade
          %>
          <td class="${data_class}" data-percent="${fraction}">${ "{0:.0f}".format( 100 * fraction ) }</td>
        </%def>

        <tbody>
          %for student in students:
          <tr>
            %for section in student['grade_summary']['section_breakdown']:
              ${percent_data( section['percent'] )}
            %endfor
            ${percent_data( student['grade_summary']['percent'])}
          </tr>
          %endfor
        </tbody>
      </table>
    </div>

    %endif
  </section>
</div>
</section>