{% load i18n %}
{% load static %}
{% load dashboard_tags %}
{% load staticfiles %}

<link href="{% static 'gui2/appstore2/css/jtimeline.css' %}" rel="stylesheet"></link>
<script type="text/javascript" src="{% static 'gui2/appstore2/js/jtimeline.js' %}"></script>
<div id="timeline" class="jtimeline">
    <ul class="jtimeline-events">
        {% for row in content.rows %}
            <li class="jtimeline-event {{ row.stage }}" data-timestamp="{{ row.date }}">
                {{ row.title}}<br/>
                {{ row.subtitle }}
        </li>
        {% endfor %}
    </ul>
</div>

<script>
  $(document).ready(function() {
      $('#timeline').jTimeline({
      // pixels per second
      resolution: 50000,
      // minimum spacing between events
        minimumSpacing: 200,
      // scrolling (translateX) step size
        step: 200,
        leftArrow:"&larr;",
        rightArrow:"&rarr;"});
  });

</script>