{% extends 'web_template/index.html' %}
{% load i18n %}
{% load static %}
{% load problemparser %}
{% block stylesheets %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static  'datatables/media/css/dataTables.bootstrap.min.css' %}">
<link rel="stylesheet" type="text/css" href="{% static  'exam/draggable.css' %}"> <!-- To get a tick mark if the answer is correct -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
jax: ["input/TeX", "output/HTML-CSS"],
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript" src="{% static 'MathJax/MathJax.js' %}?config=TeX-AMS_CHTML"></script>
{% endblock %}
{% block page_name %}
{% trans "List of problems" %}
{% endblock %}
{% block page_description %}

{% endblock %}
{%block content %}

 <div class="box">
            <div class="box-header">
              <h3 class="box-title">Hover Data Table</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="problem_list" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>{% trans "Title" %}</th>
                  <th>{% trans "Text" %}</th>
		  <th>{%trans "Action" %}</th>
                </tr>
                </thead>
                <tbody>
		{% for problem in problem_list %}
                <tr>
                  <td>{{ problem.title }}</td>
                  <td>{{ problem.content|getHTMLText }}</td>
		  <td>
			<div class="btn-group">
			<a href="{% url 'addtoexam' problem.id %}" class="btn btn-default"><i class="fa fa-plus-circle"></i> {% trans "Add to exam" %}</a>
			<button type="button" class="btn btn-default"><i class="fa fa-edit"></i> {% trans "Detail/Edit" %}</button>
			<button type="button" class="btn btn-default"><i class="fa fa-trash"></i> {% trans "Delete" %}</button>
			</div>
		  </td>
                </tr>
		{% endfor %}
		<tfoot>
                <tr>
                  <th>{% trans "Title" %}</th>
                  <th>{% trans "Text" %}</th>
		  <th>{%trans "Action" %}</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->


{% endblock %}

{% block extra_foot %}
{{ block.super }}
<script src='{% static  'datatables/media/js/jquery.dataTables.min.js' %}'></script>
<script src='{% static  'datatables/media/js/dataTables.bootstrap.min.js' %}'></script>
<script>
  $(function () {
    $('#problem_list').DataTable()
});

</script>
{% endblock %}