{% extends "browse.html" %}
{% load static %}
{% load swh_templatetags %}

{% block title %}Origin information{% endblock %}

{% block swh-browse-main-panel-content %}
<div class="panel-body">
  <!-- Timeline result -->
  <h2>Visits history</h2>
  <h3>Calendar</h3>
  <div class="timeline" style="margin-bottom: 20px">
    <div id="swh-calendar-window" style="height: 200px">
      <div id="cal-zoom-window" style="height: 60%"></div>
      <div id="cal-static-window" style="height: 40%"></div>
    </div>
    <button class="btn btn-sm btn-swh pull-right" id="cal-clear">Reset zoom</button>
  </div>

  <h3>List</h3>
  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Visit id</th>
          <th>Visit date</th>
          <th>Visit status</th>
          <th>Browse revision url</th>
        </tr>
      </thead>
      <tbody>
        {% for v in visits %}
        <tr class="swh-origin-visit">
          <td>{{ v.visit }}</td>
          <td>{{ v.date }}</td>
          <td>{{ v.status }}</td>
          <td><a href="{{ v.browse_url }}">{{ v.browse_url }}</a></td>
        </tr>
        {% endfor %}
      <tbody>
    </table>
  </div>
</div>

<!-- Flot calendar setup -->
<!-- Flot plugin dependencies -->
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.selection.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.9.0/jquery.flot.tooltip.min.js"></script>
<script language="javascript" type="text/javascript" src="{% static 'js/calendar.js' %}"></script>
<script>
$(function(){
  var cal = new Calendar('{{ browse_url_base }}', {{ origin_visits_data | safe }},
                         {{ swh_object_metadata.id }}, $('#cal-zoom-window'),
                         $('#cal-static-window'),  $('#cal-clear'));
});
</script>

{% endblock %}