{% extends "./browse.html" %}

{% comment %}
Copyright (C) 2017-2018  The Software Heritage developers
See the AUTHORS file at the top-level directory of this distribution
License: GNU Affero General Public License version 3, or any later version
See top-level LICENSE file for more information
{% endcomment %}

{% load static %}
{% load swh_templatetags %}
{% load render_bundle from webpack_loader %}

{% block header %}
{{ block.super }}
{% render_bundle 'origin' %}
{% endblock %}

{% block swh-browse-content %}

<h4>Overview</h4>

<ul>
  <li class="d-inline-block">
    <b>Total number of visits: </b>{{ origin_visits|length }}
    <i class="fa fa-fw" aria-hidden="true"></i>
  </li>
  <li class="d-inline-block">
    <b>Last full visit: </b><span style="margin-left: 20px;" id="swh-last-full-visit"></span>
    <i class="fa fa-fw" aria-hidden="true"></i>
  </li>
  <li class="d-inline-block">
    <b>First full visit: </b><span style="margin-left: 20px;" id="swh-first-full-visit"></span>
    <i class="fa fa-fw" aria-hidden="true"></i>
  </li>
  <li class="d-inline-block">
    <b>Last visit: </b><span style="margin-left: 20px;" id="swh-last-visit"></span>
    <i class="fa fa-fw" aria-hidden="true"></i>
  </li>
</ul>

<h4>History</h4>

<div class="text-center">
  <div class="form-check-inline">
    <label class="form-check-label active" onclick="swh.origin.showFullVisitsDifferentSnapshots(event)">
      <input type="radio" class="form-check-input" name="optradio" checked>Show full visits with different snapshots
    </label>
  </div>
  <div class="form-check-inline">
    <label class="form-check-label" onclick="swh.origin.showFullVisits(event)">
      <input type="radio" class="form-check-input" name="optradio">Show all full visits
    </label>
  </div>
  <div class="form-check-inline disabled">
    <label class="form-check-label" onclick="swh.origin.showAllVisits(event)">
      <input type="radio" class="form-check-input" name="optradio">Show all visits
    </label>
  </div>
</div>

<h5>Calendar</h5>

<div id="swh-visits-calendar"></div>

<h5>List</h5>

<div id="swh-visits-list"></div>

<h5>Timeline</h5>

<div id="swh-visits-timeline" class="d3-wrapper"></div>

<script>
  // all origin visits
  var visits = {{ origin_visits|jsonify }};
  swh.origin.initVisitsReporting(visits);
</script>
{% endblock %}
