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

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

{% block title %}
  {{ timeline_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 %}

{% if timeline_mode == 'site' %}
  {% has_perm 'timeline.view_site_timeline' request.user project as can_view_timeline %}
{% elif timeline_mode == 'admin' %}
  {% has_perm 'timeline.view_site_admin' request.user project as can_view_timeline %}
{% endif %}
{% get_plugin_lookup as plugin_lookup %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h2>
    {% if timeline_mode == 'site' or timeline_mode == 'object' %}
      <i class="iconify" data-icon="mdi:clock-time-eight-outline"></i>
    {% else %}
      <i class="iconify" data-icon="mdi:web-clock"></i>
    {% endif %}
    {{ timeline_title }}
  </h2>
  {% 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 {% if timeline_mode == 'site' %}site-wide{% endif %} timeline
              events found{% if timeline_mode == 'object' %} for this 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 %}

{% 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
    {% if timeline_mode == 'site' %}
    tour.addStep('timeline_events', {
      title: 'Site-Wide Timeline Events',
      text: 'This view displays site-wide events not linked to any ' +
            '{% get_display_name 'PROJECT' %}.',
      advanceOn: '.docs-link click',
      showCancelLink: true
    })
    {% elif timeline_mode == 'admin' %}
    tour.addStep('timeline_events', {
      title: 'All Timeline Events',
      text: 'This view displays all the timeline events on the site and can ' +
            'only be accessed by superusers.',
      showCancelLink: true
    })
    {% endif %}
  </script>
  {% include 'timeline/_list_tour.html' %} {# Common tour help items #}
{% endblock javascript %}
