{% 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 or read_only_disable %}disabled{% endif %}"
           id="sodar-ap-ops-dismiss-all"
           role="button"
           {% if read_only_disable %}disabled="disabled"{% endif %}
           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 %}
            {% get_project_badge a.project a.level can_view_project 'mr-1' as project_badge %}
            {{ project_badge | safe }}
          {% endif %}
          {{ a.message | safe }}
        </div>
        <div>
          <span class="sodar-app-alert-buttons pull-right">
            {% if not dismissed and not read_only_disable %}
              {% 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 ' +
            '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 %}
