{% extends 'layout.html' %}
{% block body %}

  <h2>History for <strong>{{ name }}</strong></h2>
  <p>
    <a class="btn btn-default btn-sm compare-revisions">Compare Revisions</a>
  </p>

  <table class="table table-bordered revision-tbl data-table">
    <thead>
    <tr>
      <th>Name</th>
      <th>Revision Message</th>
      <th>Date</th>
    </tr>
    </thead>
  </table>
  <p>
    <a class="btn btn-default btn-sm compare-revisions">Compare Revisions</a>
  </p>

{% endblock %}

{% block js %}
  <script>
    $(document).ready(function() {
      $('.data-table').dataTable({
        serverSide: true,
        ajax: '{{ url_for('.history_data', name=name) }}',
        ordering: false,
        bFilter: false,
        columns: [
          { "data": "author" },
          { "data": "message" },
          { "data": "time",
            "render": function (data) {
              var date = new Date(data * 1000);
              return date.toDateString();
            }
          }
        ]
      });
    });
    $(function(){
      $('.revision-tbl :checkbox').change(function () {
        var $cs=$(this).closest('.revision-tbl').find(':checkbox:checked');
        if ($cs.length > 2) {
          this.checked=false;
        }
      });

      $(".compare-revisions").click(function(){
        var $cs = $('.revision-tbl').find(':checkbox:checked');
        if ($cs.length != 2) return;
        var revs = [];
        $.each($cs, function(i, v){
          revs.push(v.value);
        });
        revs.reverse();
        revs = revs.join("..");
        location.href = "{{ config.RELATIVE_PATH }}/_compare/{{ name }}/" + revs;
      });
    });
  </script>
{% endblock %}