{% extends 'online_exam/base_student.html' %}
{% load static %}

{% block title %}
  <title>Progress</title>
{% endblock title %}

{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <br>
    <ol class="breadcrumb">
      <li class="active"><a href="#"><i class="fa fa-bar-chart"></i>Progress</a></li>
    </ol>
  </section>

  <!-- Main content -->
  <section class="content container-fluid">

    <!--------------------------
      | Your Page Content Here |
      -------------------------->
      <div class="table-responsive">
      <table id="example" class="table table-striped table-bordered nowrap" style="width:100%">
        <thead>
            <tr>
              <th>Session</th>
              <th>Subject</th>
              <th>Topic</th>
              <th>Score</th>
              <th>Verified</th>
              <th>Answer Key</th>
            </tr>
        </thead>
        <tbody>
          {% for i in registrations %}
            <tr><td>{{i.year}}</td><td>{{i.course}}</td><td>{{i.exam_name}}</td><td>{{i.score}}</td><td>
            {% if i.verify == 1 %}
            <button class='btn btn-primary btn-xs'><i class='fa fa-check-square-o'></i>&nbsp;Verified</button>
            {% elif i.verify == 0 %}
            <button class='btn btn-warning btn-xs'><i class='fa fa-warning'></i>&nbsp;Not Verified</button>
            {% endif %}
            </td><td>
              <form action = '../student_answer_key/' method='post'><input type='hidden' name = 'registration_id' value = "{{i.id}}" >{% csrf_token %}<button class='btn btn-warning btn-xs'><span class="text-black"><i class='fa fa-eye'></i>&nbsp;Check</span></button></form>
            </td></tr>
          {% endfor %}
        </tbody>
      </table>
      </div>
  </section>
</div>

<script>
  var Table;
  $(document).ready(function() {
  Table =  $('#example').DataTable( {
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0];
                    }
                } ),
                renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }
        }
    } );
} );

</script>
{% endblock content%}