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

{# Projectroles dependency #}
{% load projectroles_common_tags %}

{% block title %}Admin Alerts{% endblock %}

{% block css %}
  {{ block.super }}
  <style type="text/css">
    table#sodar-aa-list-table tbody tr td:nth-child(3),
    table#sodar-aa-list-table tbody tr td:nth-child(4) {
      white-space: nowrap;
    }

    table#sodar-aa-list-table thead tr th:nth-child(5),
    table#sodar-aa-list-table tbody tr td:nth-child(5) {
      width: 150px;
    }

    table#sodar-aa-list-table tr td:nth-child(6) {
      width: 75px;
    }

    /* Responsive modifications */
    @media screen and (max-width: 1100px) {
      table#sodar-aa-list-table thead tr th:nth-child(3),
      table#sodar-aa-list-table tbody tr td:nth-child(3) {
        display: none;
      }
    }

    @media screen and (max-width: 900px) {
      table#sodar-aa-list-table thead tr th:nth-child(2),
      table#sodar-aa-list-table tbody tr td:nth-child(2) {
        display: none;
      }
    }

    @media screen and (max-width: 750px) {
      table#sodar-aa-list-table thead tr th:nth-child(4),
      table#sodar-aa-list-table tbody tr td:nth-child(4) {
        display: none;
      }
    }
  </style>
{% endblock css %}

{% block javascript %}
  {{ block.super }}
  <script>
    function toogleBtnState(button, is_active)
    {
        if (is_active) {
                button.classList.add("btn-success");
                button.classList.remove("btn-warning");
                button.innerText = 'ACTIVE';
            } else {
                button.innerText = 'INACTIVE';
                button.classList.remove("btn-success");
                button.classList.add("btn-warning");
            }
    }

    $('.js-change-alert-state-button').each(function () {
        this.addEventListener("click", function (event) {
            // We change the buttons color and text, before getting a response,
            // to improve responsiveness
            const is_active_guess = event.target.innerText = 'ACTIVE';
            toogleBtnState(event.target, is_active_guess);

            $.ajax({
                type: 'POST',
                url: event.target.dataset.url,

                success: function (data) {
                    // Check if we guessed correctly
                    if (data.is_active === is_active_guess)
                        return;
                    toogleBtnState(event.target, data.is_active);
                }
            })
        });
    });
  </script>
{% endblock javascript %}

{% block projectroles %}

<div class="row sodar-subtitle-container bg-white sticky-top">
  <h2><i class="iconify" data-icon="mdi:alert"></i> Admin Alerts</h2>

  <a role="button" class="btn btn-primary ml-auto"
     href="{% url 'adminalerts:create' %}">
    <i class="iconify" data-icon="mdi:plus-bold"></i> Create Alert
  </a>
</div>

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

  {% if object_list.count > 0 %}
    <div class="card" id="sodar-aa-alert-list">
      <div class="card-body p-0">
        <table class="table table-striped sodar-card-table" id="sodar-aa-list-table">
          <thead>
            <tr>
              <th>Message</th>
              <th>User</th>
              <th>Created</th>
              <th>Expiry</th>
              <th>Status</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for a in object_list %}
              <tr {% if not a.is_active %}class="text-muted"{% endif %}
                  id="sodar-aa-alert-item-{{ a.pk }}">
                <td><a href="{% url 'adminalerts:detail' adminalert=a.sodar_uuid %}">{{ a.message }}</a></td>
                <td>{% get_user_html a.user as user_html %}{{ user_html|safe }}</td>
                <td>{{ a.date_created | date:'Y-m-d H:i:s' }}</td>
                <td>{{ a.date_expire | date:'Y-m-d' }}</td>
                <td>
                  <button class="btn sodar-list-btn
                          {% if not a.is_expired and a.active %}btn-success
                          {% elif not a.is_expired and not a.active %} btn-warning
                          {% else %} btn-danger{% endif %} js-change-alert-state-button"
                          type="button" data-url="{% url 'adminalerts:ajax_active_toggle' adminalert=a.sodar_uuid %}"
                          {% if a.is_expired %}disabled{% endif %}
                  >
                    {% if a.is_expired %}
                      EXPIRED
                    {% elif a.active %}
                      ACTIVE
                    {% else %}
                      INACTIVE
                    {% endif %}
                  </button>
                </td>
                <td>
                  <div class="btn-group sodar-list-btn-group" id="sodar-aa-alert-buttons-{{ a.pk }}">
                    <button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
                            type="button" data-toggle="dropdown" aria-expanded="false">
                      <i class="iconify" data-icon="mdi:cog"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                      <a class="dropdown-item"
                         href="{% url 'adminalerts:update' adminalert=a.sodar_uuid %}">
                        <i class="iconify" data-icon="mdi:lead-pencil"></i> Update Alert
                      </a>
                      <a class="dropdown-item text-danger"
                         href="{% url 'adminalerts:delete' adminalert=a.sodar_uuid %}">
                        <i class="iconify" data-icon="mdi:close-thick"></i> Delete Alert
                      </a>
                    </div>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    {% if is_paginated %}
      {% include 'projectroles/_pagination.html' with pg_small=False %}
    {% endif %}

  {% else %} {# if object_list.count == 0 #}
    <div class="container-fluid">
      <div class="alert alert-info" role="alert">
        No alerts found.
      </div>
    </div>
  {% endif %}

</div>

{% endblock projectroles %}
