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

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

{% block title %}{% if dismissed %}Dismissed{% else %}Active{% endif %} App Alerts{% endblock title %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    .sodar-app-alert-row div:nth-child(1) {
        max-width: 40px;
    }
  </style>
{% endblock css %}

{% block projectroles %}

<div class="row sodar-subtitle-container">
  {% if dismissed %}
    <h2>
      <i class="iconify" data-icon="mdi:alert-octagram-outline"></i>
      Dismissed App Alerts
    </h2>
  {% else %}
    <h2>
      <i class="iconify" data-icon="mdi:alert-octagram"></i>
      Active App Alerts
    </h2>
  {% endif %}
  {% if not dismissed %}
    <div class="btn-group ml-auto">
      <button class="btn btn-primary dropdown-toggle"
              id="sodar-ap-ops-dropdown"
              type="button" data-toggle="dropdown" aria-expanded="false">
        Alert Operations
      </button>
      <div class="dropdown-menu dropdown-menu-right">
        <a class="dropdown-item" id="sodar-ap-ops-dismissed"
           href="{% url 'appalerts:list_dismissed' %}">
          <i class="iconify" data-icon="mdi:alert-octagram-outline"></i>
          View Dismissed
        </a>
        <a class="dropdown-item sodar-ap-btn-dismiss
           {% if object_list.count == 0 %}disabled{% endif %}"
           id="sodar-ap-ops-dismiss-all"
           role="button"
           data-uuid=""
           data-dismiss-url="{% url 'appalerts:ajax_dismiss_all' %}">
          <i class="iconify" data-icon="mdi:close-thick"></i> Dismiss All
        </a>
      </div>
    </div>
  {% else %}
    <a class="btn btn-secondary ml-auto" id="sodar-ap-btn-active"
       href="{% url 'appalerts:list' %}">
      <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Active Alerts
    </a>
  {% endif %}
</div>

<div class="container-fluid sodar-page-container">
  {% for a in object_list %}
    {% if a.project %}
      {% has_perm 'projectroles.view_project' request.user a.project as can_view_project %}
    {% endif %}
    <div class="alert sodar-app-alert-item
                alert-{% if not a.project or can_view_project %}{{ a.level | lower }}{% else %}secondary{% endif %}"
         data-alert-uuid="{{ a.sodar_uuid }}">
      <div class="row sodar-app-alert-row">
        <div class="col col-sm-1 px-0">
          <span class="sodar-app-alert-app-icon"
                title="{% if a.app_plugin %}{{ a.app_plugin.title }}{% else %}Projectroles{% endif %}"
                data-toggle="tooltip" data-placement="top">
            <i class="iconify"
               data-icon="{% if a.app_plugin %}{{ a.app_plugin.get_plugin.icon }}{% else %}mdi:cube{% endif %}">
            </i>
          </span>
          <span class="sodar-app-alert-date-icon"
                title="{{ a.date_created | date:'Y-m-d H:i' }}"
                data-toggle="tooltip" data-placement="top">
            <i class="iconify" data-icon="mdi:clock"></i>
          </span>
        </div>
        <div class="col pl-0">
          {% if a.project %}
            {% include 'projectroles/_project_badge.html' with project=a.project color=a.level can_view=can_view_project %}
          {% endif %}
          {{ a.message | safe }}
        </div>
        <div>
          <span class="sodar-app-alert-buttons pull-right">
            {% if not dismissed %}
              {% if a.url and not a.project or can_view_project %}
                <a href="{% url 'appalerts:redirect' appalert=a.sodar_uuid %}"
                   class="btn btn-{{ a.level | lower }} sodar-list-btn sodar-ap-btn-link"
                   role="button"
                   title="Follow link and dismiss"
                   data-toggle="tooltip" data-placement="top">
                  <i class="iconify" data-icon="mdi:arrow-right-top-bold"></i>
                </a>
              {% endif %}
              <a class="btn sodar-list-btn
                        btn-{% if not a.project or can_view_project %}{{ a.level | lower }}{% else %}secondary{% endif %}
                        sodar-ap-btn-dismiss sodar-ap-btn-dismiss-single"
                 role="button"
                 title="Dismiss"
                 data-toggle="tooltip" data-placement="top"
                 data-uuid="{{ a.sodar_uuid }}"
                 data-dismiss-url="{% url 'appalerts:ajax_dismiss' appalert=a.sodar_uuid %}">
                <i class="iconify" data-icon="mdi:close-thick"></i>
              </a>
            {% endif %}
          </span>
        </div>
      </div>
    </div>
  {% endfor %}

  <div class="alert alert-info"
       id="sodar-app-alert-empty"
       style="{% if object_list.count > 0 %}display: none;{% endif %}">
    There are currently no alerts for you.
  </div>

  {% if dismissed and object_list.count > 0 %}
    {% include 'projectroles/_pagination.html' with pg_small=False %}
  {% endif %}
</div>

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  <!-- Appalerts list Javascript -->
  <script type="text/javascript" src="{% static 'appalerts/js/appalerts_list.js' %}"></script>

  <!-- Tour content -->
  <script type="text/javascript">
      tourEnabled = true;
      tour.addStep('app_alerts', {
          title: 'App Alerts',
          text: 'In this application you can view, follow up and dismiss ' +
                'alerts created for your from other apps. These usually ' +
                'consist of some actions by other users or asynchronous ' +
                'processes requiring your attention.',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
      if ($('#sodar-app-alert-empty').is(':visible')) {
          tour.addStep('app_alerts_empty', {
              title: 'No Alerts Message',
              text: 'This is where your alerts will be displayed. Currently ' +
                    'there are no alerts to display in this view.',
              attachTo: '#sodar-app-alert-empty top',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-app-alert-item').length) {
          tour.addStep('alert', {
              title: 'App Alert',
              text: 'This is an app alert. It contains details about the ' +
                    'event along with links to follow and/or dismiss the ' +
                    'alert. The color of the alert denotes the type and ' +
                    'severity of the alert. Blue for informational, green ' +
                    'for success, yellow for warning and red for an error ' +
                    'or failure.',
              attachTo: '.sodar-app-alert-item top',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-app-alert-app-icon').length) {
          tour.addStep('alert', {
              title: 'App Icon',
              text: 'This icon depicts the application from which the alert ' +
                    'was raised. The name of the app is displayed as a ' +
                    'tooltip when you hover the mouse on top of it.',
              attachTo: '.sodar-app-alert-app-icon right',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-app-alert-date-icon').length) {
          tour.addStep('alert', {
              title: 'Date of Creation',
              text: 'The timestamp of this event\'s creation is displayed as ' +
                    'the tooltip for this icon.',
              attachTo: '.sodar-app-alert-date-icon right',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-project-badge').length) {
          tour.addStep('alert', {
              title: 'Alert {% get_display_name 'PROJECT' title=True %} or ' +
                     '{% get_display_name 'CATEGORY' title=True %}',
              text: 'This badge links to the ' +
                    '{% get_display_name 'PROJECT' %} or ' +
                    '{% get_display_name 'CATEGORY' %} to which the alerted ' +
                    'activity is related.',
              attachTo: '.sodar-project-badge top',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-ap-btn-link').length) {
          tour.addStep('alert', {
              title: 'Follow and Dismiss Alert',
              text: 'This link dismisses the alert and takes you to the ' +
                     'corresponding app and {% get_display_name 'PROJECT' %}.',
              attachTo: '.sodar-ap-btn-link left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-ap-btn-dismiss-single').length) {
          tour.addStep('alert', {
              title: 'Dismiss Alert',
              text: 'Clicking on this button dismisses the alert and keeps ' +
                    'you in the alert list view.',
              attachTo: '.sodar-ap-btn-dismiss-single left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('#sodar-ap-ops-dropdown').length) {
          tour.addStep('alert', {
              title: 'Alert Operations',
              text: 'From this dropdown you can view dismissed alerts as ' +
                    'well as dismiss all of your currently active alerts.',
              attachTo: '#sodar-ap-ops-dropdown left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('#sodar-ap-btn-active').length) {
          tour.addStep('alert', {
              title: 'Alert Operations',
              text: 'This button returns you to the list of active alerts.',
              attachTo: '#sodar-ap-btn-active left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      if ($('.sodar-pr-pagination').length) {
          tour.addStep('timeline_pagination', {
              title: 'Timeline Pagination',
              text: 'Here you can navigate through the subpages of the alert ' +
                    'list.',
              attachTo: '.sodar-pr-pagination top',
              advanceOn: '.docs-link click',
              showCancelLink: true,
              scrollTo: true
           });
       }
  </script>
{% endblock javascript %}
