{% extends 'projectroles/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 %}

{% has_perm 'timeline.view_site_timeline' request.user project as can_view_timeline %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h2><i class="iconify" data-icon="mdi:clock-time-eight"></i> {{ timeline_title }}</h2>
  {% if timeline_mode == 'object' %}
    <div class="ml-auto">
      <a href="{% url 'timeline:list_site' %}"
         class="btn btn-secondary ml-auto" role="button">
        <i class="iconify" data-icon="mdi:arrow-left-circle"></i>
        Site-Wide Events
      </a>
    </div>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">

  {% if object_list.count > 0 %}
    <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>
            {% for event in object_list %}
              {% include 'timeline/_list_item.html' %}
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% if is_paginated %}
      {% include 'projectroles/_pagination.html' with pg_small=False %}
    {% endif %}
   {% else %}
    <div class="alert alert-info" role="alert">
      No site-wide timeline events found{% if timeline_mode == 'object' %} for this object{% endif %}.
    </div>
  {% endif %}
</div> <!-- sodar-page-container -->

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  {# Tour content #}
  <script type="text/javascript">
      tourEnabled = true;

      tour.addStep('event_list', {
          title: 'Site-Wide Event List',
          text: 'This is the list of site-wide events not linked to any ' +
              '{% get_display_name "PROJECT" %}' + ', organized by newest ' +
              'first.',
          attachTo: '#sodar-tl-event-list top',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });

      tour.addStep('event_details', {
          title: 'Event Details',
          text: 'Click an event timestamp to open a popup with details ' +
                'regarding each event.',
          attachTo: '#sodar-tl-header-timestamp right',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });

      if ($('.sodar-pr-pagination').length) {
          tour.addStep('timeline_nav', {
             title: 'Timeline Navigation',
              text: 'Use these buttons to navigate through site-wide events.',
              attachTo: '.sodar-pr-pagination top',
              advanceOn: '.docs-link click',
              showCancelLink: true,
              scrollTo: true
           });
       }
    </script>
{% endblock javascript %}
