{% extends "layout.html" %}

{% block head %}
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
  <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
  <script type="text/javascript" class="init">
  $(document).ready(function() {
    $('#QuoteTable').DataTable( {
        "order": [[ 0,"desc" ]],
        "lengthMenu": [[ 10, 25, 50, 100, -1 ], [ 10, 25, 50, 100, "All" ]],
        "pagingType": "full_numbers",
        "stateSave": true
    } );
  } );
  </script>
{% endblock %}

{% block body %}
<div class="container-fluid">
  <div class="col-md-12">
    <div class="table-responsive">
      <table class="table table-hover table-bordered" id="QuoteTable">
        <thead>
          <tr>
            <th>Date Added</th>
            <th>User</th>
            <th>Quote</th>
            <th>Context</th>
            {% if data[1] %}
            <th>Added By:</th>
            <th><span class="glyphicon glyphicon-trash"></span></th>
            {% endif %}
          </tr>
        </thead>
        <tbody>
    {% for entry in data[0] %}
          <tr>
            <td><a href="/">{{ entry[2] }}</a></td>
            <td>{{ uid_to_user(entry[3]) }}</td>
            <td>{{ entry[1] }}</td>
            <td>{{ entry[4] }}</td>
            {% if data[1] %}
            <td>{{ uid_to_user(entry[5]) }}</td>
            <td><a href="/deletequote?id={{ entry[0] }}" class="btn btn-danger"role="button" ><span class="glyphicon glyphicon-trash"></span></a></td>
            {% endif %}
          </tr>
    {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}