{% extends 'base/layout.html' %}
{% load helpers %}
{% load i18n %}

{% comment %}
Context:
  table: Table of the NetBox objects on the active tab that Slurp'it has not synced for more than `days` days
  tabs: List of {value, label, count} for every object type
  active_tab: Value of the active tab
  days: Days without a sync after which an object is listed
  cutoff: Objects last synced before this time are listed
  last_sync_run: When the Slurp'it sync of the active type last ran with every record processed
  paused: True when the Slurp'it sync of the active type has not run since the cutoff; deleting is then disabled
  kind_verbose_name_plural: Plural name of the active type, used in the sync and paused messages
  can_delete: True when the user has the NetBox delete permission on the active type; row checkboxes and "Delete selected" are shown only then
  max_days: Largest accepted `days` value
{% endcomment %}

{% block header %}
  <div class="page-header m-0">
    {{ block.super }}

    {% block page-header %}
      <div class="container-fluid mt-2 d-print-none">
        <div class="d-flex justify-content-between">

          {# Title #}
          <div>
            {% include "slurpit_netbox/logo.html" %}
            <h2 class="page-title my-1">
              {% block title %}
                {% trans "Stale data" %}
              {% endblock title %}
            </h2>
            {% block subtitle %}Identify and remove all unused or outdated data.{% endblock %}
          </div>

        </div>
      </div>
    {% endblock %}

    {# Tabs #}
    <div class="page-tabs mt-3">
      <div class="container-fluid">
        {% block tabs %}
          <ul class="nav nav-tabs">
            {% for tab in tabs %}
              <li class="nav-item" role="presentation">
                <a class="nav-tab nav-link {% if tab.value == active_tab %}active{% endif %}" href="?tab={{ tab.value }}">
                  {{ tab.label }} {% badge tab.count %}
                </a>
              </li>
            {% endfor %}
          </ul>
        {% endblock %}
      </div>
    </div>

  </div>
{% endblock header %}


{% block content %}
  <div class="tab-content">
    <div class="show active">

        <form method="get" class="d-flex flex-wrap align-items-center gap-2 mb-3">
          <input type="hidden" name="tab" value="{{ active_tab }}" />
          <label for="stale-days" class="form-label mb-0">{% trans "Not synced by Slurp'it for more than" %}</label>
          <input type="number" min="1" max="{{ max_days }}" name="days" id="stale-days" value="{{ days }}" class="form-control" style="width: 7rem;" />
          <span>{% trans "days" %}</span>
          <button type="submit" class="btn btn-primary">{% trans "Apply" %}</button>
          <span class="text-muted ms-3">
            <i class="mdi mdi-information-outline"></i>
            {% if last_sync_run %}
              {% blocktrans trimmed with objects=kind_verbose_name_plural date=last_sync_run|isodatetime %}
                Last Slurp'it sync of {{ objects }}: {{ date }}
              {% endblocktrans %}
            {% else %}
              {% blocktrans trimmed with objects=kind_verbose_name_plural %}
                No Slurp'it sync of {{ objects }} yet
              {% endblocktrans %}
            {% endif %}
          </span>
        </form>

        {% if paused %}
          <div class="alert alert-warning" role="alert">
            <i class="mdi mdi-alert"></i>
            <div>
              {% blocktrans trimmed with objects=kind_verbose_name_plural date=cutoff|isodate %}
                No Slurp'it sync of {{ objects }} since {{ date }}. Every object of this type would look stale, including objects that still exist, so stale detection is paused and deleting is disabled. Check that Slurp'it is still syncing {{ objects }}.
              {% endblocktrans %}
            </div>
          </div>
        {% endif %}

        {# Object table controls #}
        {% include 'inc/table_controls_htmx.html' with table_modal="ObjectTable_config" %}

        <form method="post" class="form form-horizontal" id="cleanup_form">
          {% csrf_token %}
          <input type="hidden" name="action" value="preview" />
          <input type="hidden" name="tab" value="{{ active_tab }}" />
          <input type="hidden" name="days" value="{{ days }}" />
          <input type="hidden" name="q" id="cleanup-selection-q" value="{{ request.GET.q }}" />

          {% if can_delete %}
            <div id="select-all-box" class="d-none card noprint">
              <div class="form col-md-12">
                <div class="card-body">
                  <div class="form-check">
                    <input type="checkbox" id="select-all" name="_all" class="form-check-input" />
                    <label for="select-all" class="form-check-label">
                      {% blocktrans trimmed with count=table.rows|length object_type_plural=table.data.verbose_name_plural %}
                        Select <strong>all <span class="total-object-count">{{ count }}</span> {{ object_type_plural }}</strong> matching query
                      {% endblocktrans %}
                    </label>
                  </div>
                </div>
              </div>
            </div>

            <div class="noprint bulk-buttons">
              <div class="bulk-button-group">
                <div class="mb-2 d-flex align-items-center" role="group">
                  <button type="submit" class="btn btn-red protect-btn" {% if paused %}disabled{% endif %}>
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i> {% trans "Delete selected" %}
                  </button>
                  <span class="text-muted ms-3">
                    <i class="mdi mdi-information-outline"></i>
                    {% trans "Nothing is deleted yet: the next page shows what would be deleted and what is blocked, and asks for confirmation." %}
                  </span>
                </div>
              </div>
            </div>
          {% endif %}

          <div class="card">
            <div class="card-body htmx-container" id="object_list">
              {% include 'htmx/table.html' %}
            </div>
          </div>
        </form>
    </div>
  </div>
  {% table_config_form table table_name="ObjectTable" %}

  <script>
    // The quick search filters the table through HTMX without changing the page URL, so its text is posted with the form for "Select all" to use.
    document.getElementById('cleanup_form').addEventListener('submit', () => {
      const quicksearch = document.getElementById('quicksearch');
      if (quicksearch) {
        document.getElementById('cleanup-selection-q').value = quicksearch.value;
      }
    });
    document.querySelectorAll('.protect-btn').forEach(button => {
      button.addEventListener('click', function(event) {
        setTimeout(() => {
          event.target.classList.add('disabled');
          event.target.textContent = '{% trans "Please wait" %}';
        });
      });
    });

    // Object links in the table rows open in a new tab, so the Stale data list and its selection stay open; the listener is on the document, so rows that HTMX loads later are covered too, and the row action buttons and their dropdown keep their own targets.
    document.addEventListener('click', function(event) {
      const link = event.target.closest('#object_list tbody td a[href]:not(.btn):not(.dropdown-item):not([data-bs-toggle]):not([href^="#"])');
      if (link) {
        link.target = '_blank';
        link.relList.add('noopener');
      }
    }, true);

    // NetBox reloads the page without its query string after the table configuration is applied or reset, which drops ?tab= and ?days=; this capture-phase handler runs before NetBox's form listener, saves the configuration through the same API call and reloads the page with its query string kept.
    document.addEventListener('submit', function(event) {
      const form = event.target.closest('form.userconfigform');
      if (!form) {
        return;
      }
      event.preventDefault();
      event.stopImmediatePropagation();

      const reset = event.submitter && event.submitter.value === 'Reset';
      const values = reset ? {} : { columns: Array.from(form.querySelector('select[name="columns"]').options, option => option.value) };
      const data = form.dataset.configRoot.split('.').reduceRight((value, key) => ({ [key]: value }), values);

      fetch(form.dataset.url, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': document.querySelector('input[name="csrfmiddlewaretoken"]').value
        },
        body: JSON.stringify(data)
      })
      .then(response => {
        if (!response.ok) {
          throw new Error(`${response.status} ${response.statusText}`);
        }
        window.location.reload();
      })
      .catch(error => alert(`{% trans "Failed to update the table configuration" %}: ${error.message}`));
    }, true);
  </script>
{% endblock content %}

<footer class="footer container-fluid">
  {% block footer %}
    {% include "slurpit_netbox/footer.html" %}
  {% endblock footer %}
</footer>