<%inherit file="main.html" />

<%block name="headextra">
  <script type="text/javascript" src="/static/js/flot/jquery.flot.js"></script>
  <script type="text/javascript" src="/static/js/flot/jquery.flot.stack.js"></script>
  <script type="text/javascript" src="/static/js/flot/jquery.flot.symbol.js"></script>
  
  <style type="text/css">
  .grade_A {color:green;}
  .grade_B {color:Chocolate;}
  .grade_C {color:DarkSlateGray;}
  .grade_F {color:DimGray;}
  .grade_None {color:LightGray;}
  </style>
  
</%block>

<%include file="navigation.html" args="active_page=''" />
<section class="main-content">
<div class="gradebook-wrapper">
  <section class="gradebook-content">
    <h1>Gradebook</h1>
    
    %if len(students) > 0:
    <table>
      <%
      templateSummary = students[0]['grade_info']['grade_summary']
      %>
      
      
      <tr> <!-- Header Row -->
        <th>Student</th>
        %for section in templateSummary['section_breakdown']:
          <th>${section['label']}</th>
        %endfor
        <th>Total</th>
      </tr>
      
      <%def name="percent_data(percentage)">
        <%
          letter_grade = 'None'
          if percentage > 0:
            letter_grade = 'F'
            for grade in ['A', 'B', 'C']:
              if percentage >= grade_cutoffs[grade]:
                letter_grade = grade
                break
          
          data_class = "grade_" + letter_grade
        %>
        <td class="${data_class}">${ "{0:.0%}".format( percentage ) }</td>
      </%def>
      
      %for student in students:
      <tr>
        <td><a href="/profile/${student['id']}/">${student['username']}</a></td>
        %for section in student['grade_info']['grade_summary']['section_breakdown']:
          ${percent_data( section['percent'])}
        %endfor
        <th>${percent_data( student['grade_info']['grade_summary']['percent'])}</th>
      </tr>
      %endfor
    </table>
    %endif
  </section>
</div>
</section>
