{% 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 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">
  <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>
                <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 sodar-aa-alert-dropdown">
                  <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>
              </td>
            </tr>
          {% endfor %}
          {% if not object_list %}
            <tr>
              <td class="bg-faded font-italic text-center" colspan="6">
                No alerts found.
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
  {% if is_paginated %}
    {% include 'projectroles/_pagination.html' with pg_small=False %}
  {% endif %}
</div>

{% endblock projectroles %}

{% 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 %}
