{% load helpers %}
{% include 'inc/messages.html' %}
{% if request.htmx %}
{% include "netbox_librenms_plugin/inc/_sync_cache_countdown.html" with cache_expiry=ip_sync.cache_expiry cache_container_id="ip-cache-countdown" cache_countdown_id="ip-countdown-timer" cache_oob=True %}
{% endif %}

<!-- IP Address Sync Table -->
{% if ip_sync.table %}
{# Migrated donors must not sync: hiding only the button leaves the POST form live (Enter in a filter still submits), so drop the form in migrated mode. #}
{% with model_name=ip_sync.object|meta:"model_name" %}
{% if migrated_to_marker %}
<div>
{% else %}
<form method="post"
      action="{% url 'plugins:netbox_librenms_plugin:sync_device_ip_addresses' object_type=model_name pk=ip_sync.object.pk %}"
      hx-post="{% url 'plugins:netbox_librenms_plugin:sync_device_ip_addresses' object_type=model_name pk=ip_sync.object.pk %}"
      hx-target="#htmx-modal-content"
      hx-swap="innerHTML">
{% endif %}
{% endwith %}
    {% csrf_token %}
    {% if ip_sync.server_key %}<input type="hidden" name="server_key" value="{{ ip_sync.server_key }}">{% endif %}
    <div class="noprint d-flex align-items-center mt-0 mb-3 sync-tab-primary-toolbar">
        <div class="d-flex align-items-center gap-2">
            {% if not migrated_to_marker %}
            <button type="submit" class="btn btn-primary">
                <span class="spinner spinner-border d-none" id="sync-spinner"></span>
                <span>Sync Selected IP Addresses</span>
            </button>
            <div class="dropdown" id="ip-sync-options">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button"
                        data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    <i class="mdi mdi-tune-variant"></i> Sync options
                    <span class="badge bg-secondary-lt ms-1" id="ip-sync-options-count">0</span>
                </button>
                <div class="dropdown-menu p-3 ip-sync-options-menu">
                    <div class="form-check form-switch mb-2">
                        <input type="hidden" name="set-primary-ip-toggle" value="off">
                        <input class="form-check-input ip-sync-option" type="checkbox" id="set-primary-ip-toggle-cb"
                               name="set-primary-ip-toggle" value="on" {% if ip_sync.set_primary_ip %}checked{% endif %}
                               data-default-checked="false"
                               title="When the synced IP equals the device's LibreNMS management IP and is assigned to an interface, set it as the Primary IP.">
                        <label class="form-check-label small" for="set-primary-ip-toggle-cb">Set Primary IP</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input type="hidden" name="create-missing-interfaces-toggle" value="off">
                        <input class="form-check-input ip-sync-option" type="checkbox" id="create-missing-interfaces-toggle-cb"
                               name="create-missing-interfaces-toggle" value="on" {% if ip_sync.create_missing_interfaces %}checked{% endif %}
                               data-default-checked="false"
                               title="Create a missing NetBox interface from the cached LibreNMS port before assigning the selected IP address.">
                        <label class="form-check-label small" for="create-missing-interfaces-toggle-cb">Create missing interfaces</label>
                    </div>
                    <hr class="my-2">
                    <button class="btn btn-link btn-sm p-0" type="button" id="reset-ip-sync-options">
                        Reset to defaults
                    </button>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="row mb-3">
        <div class="col col-md-12">
            <div class="d-flex justify-content-end align-items-center mb-3">
                <button class="btn btn-sm btn-secondary sync-filter-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#ipFilterSection" aria-expanded="false" aria-controls="ipFilterSection">
                    <i class="mdi mdi-filter-outline"></i> Filters
                </button>
            </div>
            <div class="collapse mb-3" id="ipFilterSection">
                <div class="mb-2">
                    <small class="text-muted">
                        <i class="mdi mdi-information"></i> Filters apply to currently displayed IP addresses.
                    </small>
                </div>
                <div class="filter-container d-flex gap-2">
                    <input type="text" id="filter-address" placeholder="Filter by Address" class="form-control">
                    <input type="text" id="filter-prefix" placeholder="Filter by Prefix" class="form-control">
                    <input type="text" id="filter-device" placeholder="Filter by Device" class="form-control">
                    <input type="text" id="filter-interface" placeholder="Filter by Interface" class="form-control">
                </div>
            </div>
            <style>
                .ts-wrapper.multi .ts-control {
                    display: flex !important;
                    flex-wrap: wrap;
                    align-items: center;
                }

                /* VRF dropdown styles */
                td[data-col="vrf"] {
                    width: 250px;
                    min-width: 180px;
                }
                td[data-col="vrf"] .ts-wrapper {
                    width: 100%;
                    max-width: 100%;
                }

                /* Ensure select elements in VRF column maintain consistent width */
                td[data-col="vrf"] select.form-select {
                    width: 100%;
                    min-width: 160px;
                }
            </style>
            <div class="card">
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=ip_sync.table %}
                {% include 'inc/table.html' with table=ip_sync.table %}
                {% include 'netbox_librenms_plugin/inc/paginator.html' with table=ip_sync.table %}
            </div>
        </div>
    </div>
{% if migrated_to_marker %}
</div>
{% else %}
</form>
{% endif %}
<script>
  // "Set Primary IP" toggle behaviour:
  //  - persist the choice as a user preference (remembered across visits)
  //  - auto-tick the management-IP row (flagged server-side with data-mgmt-ip)
  //    so syncing it sets the device/VM Primary IP in one action.
  // Guarded so it binds once even after HTMX swaps.
  (function () {
    var cb = document.getElementById('set-primary-ip-toggle-cb');
    if (!cb || cb.dataset.prefBound) return;
    cb.dataset.prefBound = '1';

    function mgmtRowCheckboxes() {
      return document.querySelectorAll('tr[data-mgmt-ip="true"] input[name="select"]');
    }

    function syncMgmtSelection() {
      mgmtRowCheckboxes().forEach(function (box) { box.checked = cb.checked; });
    }

    // Reflect the initial (pref-restored) toggle state onto the mgmt row.
    syncMgmtSelection();

    cb.addEventListener('change', function () {
      syncMgmtSelection();
      var url = "{% url 'plugins:netbox_librenms_plugin:save_user_pref' %}";
      var token = (document.querySelector('[name=csrfmiddlewaretoken]') || {}).value || '';
      fetch(url, {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': token },
        body: JSON.stringify({ key: 'set_primary_ip', value: cb.checked })
      })
        .then(function (response) {
          if (!response.ok) { throw new Error('HTTP ' + response.status); }
        })
        .catch(function (e) { console.debug('savePref failed:', e.message); });
    });
  })();
</script>
{% else %}
<div class="card">
    <div class="card-body text-center text-muted py-4">
        <i class="mdi mdi-sync-off mdi-48px"></i>
        <p class="mt-2 mb-0">No IP address data loaded. Click <strong>Refresh IP Addresses</strong> to fetch data from LibreNMS.</p>
    </div>
</div>
{% endif %}

{% comment %}
Migrated donor: per-row "Move IP to winner" actions. Re-homes an interface-assigned IP to the
winner's same-named interface (the backend validates and fails closed via an OOB toast). Mirrors
the interface move-to-winner control in _interface_sync_content.html.
{% endcomment %}
{% if migrated_to_marker and ip_sync.movable_ips %}
<div class="card mt-3">
    <div class="card-header">
        <i class="mdi mdi-transfer-right"></i>
        Move IP addresses{% if migrated_to_winner %} to {{ migrated_to_winner.name }}{% endif %}
    </div>
    <div class="card-body">
        {% if not migrated_to_winner %}
        <div class="alert alert-warning py-2" role="alert">
            The migration winner is unavailable. Restore the winner device before moving these IP addresses.
        </div>
        {% endif %}
        <p class="text-muted small mb-2">
            Re-home a donor interface-assigned IP to the winner's same-named interface
            (move the interface first if it doesn't exist on the winner yet).
        </p>
        <table class="table table-hover" id="librenms-ipaddress-migrate-table">
            <thead>
                <tr>
                    <th>IP Address</th>
                    <th>Interface</th>
                    <th class="text-end">Migrate</th>
                </tr>
            </thead>
            <tbody>
                {% for ip in ip_sync.movable_ips %}
                <tr>
                    <td>{{ ip.address }}</td>
                    <td>{{ ip.interface_name|default:"-" }}</td>
                    <td class="text-end">
                        {% include "netbox_librenms_plugin/inc/_migrate_move_button.html" with move_url_name="plugins:netbox_librenms_plugin:ipaddress_move_to_winner" obj_id=ip.id obj_label=ip.address entity_word="IP" obj_interface_name=ip.interface_name winner=migrated_to_winner server_key=migrated_to_marker.server_key|default:ip_sync.server_key %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}