<%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)">
        <%
          data_class = "grade_none"
          if percentage > .87:
            data_class = "grade_a"
          elif percentage > .70:
            data_class = "grade_b"
          elif percentage > .6:
            data_class = "grade_c"
          elif percentage > 0:
              data_class = "grade_f"
        %>
        <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>
