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

{% block title %}
  <title>Topics</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-clipboard"></i>Topics</a></li>
      </ol>
    </section>

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

      <!--------------------------
        | Your Page Content Here |
        -------------------------->

        {% if messages %}
          {% for message in messages%}
            <br>
            <div class="callout callout-success">
              <p>{{message}}</p>
            </div>
          {% endfor %}
        {% endif %}
            <a href="../student_approved_exams/"><button class = "btn btn-xplicit-orange"><i class="fa fa-eye"></i> Attempt Exams Here</button></a>
            <br>
            <br>
        <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>Note</th>
              <th>Attempts Left</th>
              <th>Action</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for i in exams %}
              <tr>
                <td>{{ i.year }}</td>
                <td>{{ i.course_name }}</td>
                <td>{{i.exam_name}}</td>
                {% if i.note %}
                <td class="text-center"><a download title="Download" href="{{i.note.url}}"><i class="fa fa-2x text-dark fa-file mr-2"></i></a></td>
                {% else %}
                <td></td>
                {% endif %}
                {% if i.attempts_left <= 0%}
                <td>0</td>
                {% else %}
                <td>{{i.attempts_left}}</td>
                {% endif %}
                {% if i.attempts_left <= 0%}
                <td><button class="btn btn-xs btn-xplicit-deep" disabled=""><i class="fa fa-edit"></i> Already registered</button></td>
                {% else %}
                <td><form action = "{% url 'student_exams' %}" method = "POST"><input type = "hidden" name = "exam_id" value = "{{i.id}}">{% csrf_token %}<button class="btn btn-xs btn-xplicit-deep" type="submit"><i class="fa fa-edit"></i> Register</button></form></td>
                {% endif %}
                {% if i.reg.registered == 1 %}
                <td><i class='fa fa-thumbs-up text-green'></i> Approved</td>
                {% else %}
                <td> Not yet approved</td>
                {% endif %}
              </tr>
            {% endfor %}
            </tbody>
          </table>
          </div>
    </section>
  </div>
  <script>
    var Table;
    $(document).ready(function() {
    Table =  $('#example').DataTable( {
      "order":[],
          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%}