{% 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="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>
{% endblock %}