{% extends 'projectroles/project_base.html' %}

{% load rules %}
{% load static %}
{% load timeline_tags %}
{% load projectroles_common_tags %}

{% block title %}
  {{ timeline_title }}
  {% if timeline_mode == 'project' %}for{% else %}in{% endif %}
  {{ project.title }}
{% endblock title %}

{% block css %}
  {{ block.super }}
  <!-- Timeline CSS -->
  <link rel="stylesheet" type="text/css" href="{% static 'timeline/css/timeline.css' %}" />
{% endblock css %}

{% block projectroles_extend %}

{% has_perm 'timeline.view_timeline' request.user project as can_view_timeline %}
{% get_plugin_lookup as plugin_lookup %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h3>
    <i class="iconify" data-icon="mdi:clock-time-eight"></i>
    {{ timeline_title }}
  </h3>
  {% if timeline_mode == 'object' %}
    <div class="ml-auto">
      <a href="{{ request.META.HTTP_REFERER }}"
         class="btn btn-secondary ml-auto" id="sodar-tl-back-btn" role="button">
        <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Back
      </a>
    </div>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
    <div class="card mb-3" id="sodar-tl-event-list">
      <div class="card-body p-0">
        <table class="table table-striped sodar-card-table" id="sodar-tl-table">
          <thead>
            {% include 'timeline/_list_header.html' %}
          </thead>
          <tbody>
            {% if object_list.count > 0 %}
              {% for event in object_list %}
                {% include 'timeline/_list_item.html' %}
              {% endfor %}
            {% else %}
              <td class="bg-faded font-italic text-center" colspan="3">
                No timeline events found for this
                {% if timeline_mode == 'project' %}
                  {% get_display_name 'PROJECT' %}.
                {% else %}
                  object.
                {% endif %}
              </td>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
    {% if is_paginated %}
      {% include 'projectroles/_pagination.html' with pg_small=False %}
    {% endif %}
</div> {# sodar-page-container #}

{% endblock projectroles_extend %}

{% block javascript %}
  {{ block.super }}
  <!-- Event list -->
  <script type="text/javascript" src="{% static 'timeline/js/timeline.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
    tourEnabled = true
    tour.addStep('timeline_events', {
      title: '{% get_display_name 'PROJECT' title=True %} Timeline',
      text: 'In this view you can browse the timeline events for this ' +
            '{% get_display_name 'PROJECT' %}, ' +
            '{% get_display_name 'CATEGORY' %} or object.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
  </script>
  {% include 'timeline/_list_tour.html' %} {# Common tour help items #}
{% endblock javascript %}
