{% extends "base.html" %}
{% block javascript %}
  <script src="/static/js/moment.min.js"></script>
  <script>
    $(document).ready(function() {
      var dates = $('.datetime'),
          intervals = $('.time-interval')
          times = $('.time');
      $.each(dates, function (i, date) {
        var $date = $(date);
        $date.html(moment(new Date($date.attr('data-date'))).fromNow());
      });

      $.each(intervals, function (i, interval) {
        var $interval = $(interval);
        $interval.html(secondsToStr($interval.attr('data-time'), true));
      });

      $.each(times, function (i, time) {
        var $time = $(time);
        $time.html(secondsToStr($time.attr('data-time')));
      });
      $('.datetime, .time, .time-interval').tooltip();
    });
  </script>
{% endblock javascript %}
{% block main %}
      <div class="jumbotron">
        <h2>Tasks</h2>
        {% set category_id = None %}
        {% for job in jobs %}
            {% if job.category_id != category_id %}
                {% set category_id = job.category_id %}
                <h5 class="task-category">{{ categories[job.category_id].name }}</h4>
            {% endif %}

            <div class="task-container-outer">
                <div class="task-container-inner">
                    <a href="{{ url_for('job', id=job.id) }}" class="task-status task-status-{{ job.last_run_status }}"></a>
                    <a href="{{ url_for('job', id=job.id) }}" class="task-name">{{ job.name }}</a>
                    <div class="task-lastrun">
                        {{ job.last_run_text | safe }}
                    </div>
                </div>
            </div>
        {% endfor %}
      </div>
{% endblock main %}
