{% extends 'hostile/base.html' %}
{% load i18n humanize l10n static %}

{% block extra_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'hostile/css/hostile_structures.css' %}">
{% endblock %}

{% block details %}
<div class="structure-registry">
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h4 class="mb-0 fw-bold"><i class="fas fa-monument text-info me-2"></i>{% translate "Hostile Structures Registry" %}</h4>
        <p class="sr-muted small mb-0" id="structureSummary">{% translate "Tracked hostile citadels, engineering complexes, refineries, and POSes." %}</p>
    </div>
    <div class="d-flex gap-2">
        {% if perms.hostile.manage_intel %}
        <button type="button" class="btn btn-outline-info btn-sm fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#suspectedDuplicatesModal" title="{% translate 'Review potential duplicate structures and merge them' %}">
            <i class="fas fa-layer-group me-1"></i>{% translate "Suspected Duplicates" %}
            <span class="badge bg-warning text-dark ms-1 {% if not suspected_count %}d-none{% endif %}" id="suspectedCountBadge">{{ suspected_count|default:0 }}</span>
        </button>
        <form action="{% url 'hostile:structure_auto_deduplicate' %}" method="post" class="d-inline" data-hostile-loading="{% translate 'Merging duplicate structures' %}" data-hostile-loading-detail="{% translate 'Scanning every solar system and consolidating duplicate records...' %}" onsubmit="return confirm('{% translate "Are you sure you want to scan and merge all duplicate structures across all systems?" %}');">
            {% csrf_token %}
            <button type="submit" class="btn btn-outline-warning btn-sm fw-bold shadow-sm" title="{% translate 'Scan and merge duplicate structures (Ansiblex variants, generic timer syncs, etc.)' %}">
                <i class="fas fa-compress-alt me-1"></i>{% translate "Merge Duplicates" %}
            </button>
        </form>
        {% endif %}
        <button type="button" class="btn btn-primary btn-sm fw-bold shadow-sm" data-bs-toggle="modal" data-bs-target="#addStructureModal">
            <i class="fas fa-plus me-1"></i>{% translate "Add Structure" %}
        </button>
    </div>
</div>

<!-- Search, quick-filter chips, state/core filters and group depth -->
<div class="d-flex flex-wrap gap-2 align-items-center mb-3">
    <div class="input-group input-group-sm" style="max-width: 340px;">
        <span class="input-group-text bg-transparent sr-muted"><i class="fas fa-search"></i></span>
        <input type="text" id="structureSearchInput" class="form-control form-control-sm" placeholder="{% translate 'Search name, system, region, owner, type...' %}" autofocus>
        <button class="btn btn-outline-secondary btn-sm d-none" type="button" id="clearStructureSearchBtn" title="{% translate 'Clear search' %}">
            <i class="fas fa-times"></i>
        </button>
    </div>
    <div class="d-flex gap-1 flex-wrap" id="structureChips">
        <span class="sr-chip active" data-filter="">{% translate "All" %}</span>
        <span class="sr-chip" data-filter="ONLINE"><span class="dot s-ONLINE"></span>{% translate "Online" %}</span>
        <span class="sr-chip" data-filter="LOW_POWER"><span class="dot s-LOW_POWER"></span>{% translate "Low Power" %}</span>
        <span class="sr-chip" data-filter="DESTROYED"><span class="dot s-DESTROYED"></span>{% translate "Destroyed" %}</span>
        <span class="sr-chip" data-filter="unverified" id="structureUnverifiedChip">{% translate "Unverified" %}</span>
        <span class="sr-chip" data-filter="moon">{% translate "Has moon value" %}</span>
    </div>
    <select id="structureStateFilter" class="form-select form-select-sm w-auto no-searchable" title="{% translate 'Filter by any structure state' %}">
        <option value="">{% translate "Any state" %}</option>
        <option value="ONLINE">{% translate "Online" %}</option>
        <option value="LOW_POWER">{% translate "Low Power" %}</option>
        <option value="OFFLINE">{% translate "Offline" %}</option>
        <option value="ABANDONED">{% translate "Abandoned" %}</option>
        <option value="ANCHORING">{% translate "Anchoring" %}</option>
        <option value="UNANCHORING">{% translate "Unanchoring" %}</option>
        <option value="ARMOR">{% translate "Armor Reinforced" %}</option>
        <option value="HULL">{% translate "Hull Reinforced" %}</option>
        <option value="REINFORCED">{% translate "Reinforced" %}</option>
        <option value="DESTROYED">{% translate "Destroyed" %}</option>
    </select>
    <select id="structureCoreFilter" class="form-select form-select-sm w-auto no-searchable" title="{% translate 'Filter by quantum core' %}">
        <option value="">{% translate "Any core" %}</option>
        <option value="FITTED">{% translate "Core fitted" %}</option>
        <option value="UNFITTED">{% translate "No core" %}</option>
        <option value="UNKNOWN">{% translate "Core unknown" %}</option>
    </select>
    <button type="button" class="btn btn-outline-secondary btn-sm" id="resetStructureFiltersBtn" title="{% translate 'Reset all search & filters' %}">
        <i class="fas fa-undo me-1"></i>{% translate "Reset" %}
    </button>
    <span class="ms-auto sr-muted small">{% translate "Expand to" %}</span>
    <div class="sr-depth" id="structureDepth">
        <button type="button" data-depth="0">{% translate "Alliances" %}</button>
        <button type="button" data-depth="1">{% translate "Regions" %}</button>
        <button type="button" data-depth="2">{% translate "Systems" %}</button>
        <button type="button" data-depth="3" class="on">{% translate "All" %}</button>
    </div>
</div>

<div class="sr-scroll">
<div class="sr-scroll-inner">
{% if structures %}
<!-- Sticky column header: sorts rows within every system group -->
<div class="sr-sort-head">
    <table class="sr-table">
        <colgroup id="structureColgroup">
            <col style="width: 26%;"><col style="width: 8%;"><col style="width: 11%;"><col style="width: 13%;">
            <col style="width: 7%;"><col style="width: 12%;"><col style="width: 8%;"><col style="width: 15%;">
        </colgroup>
        <thead>
            <tr>
                <th class="sr-col-name sortable-th" data-sort="name" title="{% translate 'Click to sort by Name' %}">{% translate "Name" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="owner" title="{% translate 'Click to sort by Owner' %}">{% translate "Owner" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="state" title="{% translate 'Click to sort by State' %}">{% translate "State" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="vulnerability" title="{% translate 'Click to sort by Vulnerability' %}">{% translate "Vulnerability" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="core" title="{% translate 'Click to sort by Quantum Core' %}">{% translate "Core" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="moon" title="{% translate 'Click to sort by Moon Value' %}">{% translate "Moon Value" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="sortable-th" data-sort="updated" title="{% translate 'Click to sort by Last Updated' %}">{% translate "Updated" %} <i class="fas fa-sort sort-icon ms-1"></i></th>
                <th class="text-end">{% translate "Actions" %}</th>
            </tr>
        </thead>
    </table>
</div>
{% endif %}

<div id="structureGroups">
    {% if not structures %}
    <div class="sr-empty">
        <i class="fas fa-monument fa-3x mb-3 d-block"></i>
        <p class="mb-0">{% translate "No structures recorded yet. Add structures manually or use the universal Smart Ingest button." %}</p>
    </div>
    {% endif %}
</div>
</div>
</div>
<div id="noStructureMatchRow" class="sr-empty d-none">
    <i class="fas fa-search fa-2x mb-2 d-block"></i>
    <span>{% translate "No structures match the current search & filter criteria." %}</span>
</div>

<!-- Server-rendered rows; the grouping script moves them into Alliance › Region › System groups -->
<table class="sr-table d-none">
    <tbody id="structureRowPool">
        {% for struct in structures %}
        <tr class="structure-row{% if struct.state == 'DESTROYED' %} is-destroyed{% endif %}"
            data-id="{{ struct.id }}"
            data-order="{{ forloop.counter0 }}"
            data-name="{{ struct.name|lower }}"
            data-type="{{ struct.structure_type.name|default:'structure'|lower }}"
            data-system="{{ struct.solar_system.name|default:'unknown'|lower }}"
            data-system-name="{{ struct.solar_system.name|default:'Unknown System' }}"
            data-region="{{ struct.registry_region }}"
            data-group-key="{{ struct.registry_group_key }}"
            data-group-name="{{ struct.registry_group_name }}"
            data-group-ticker="{{ struct.registry_group_ticker }}"
            data-group-url="{% if struct.alliance %}{% url 'hostile:alliance_detail' struct.alliance.id %}{% elif struct.corporation %}{% url 'hostile:corporation_detail' struct.corporation.id %}{% endif %}"
            data-owner="{{ struct.owner_name|lower }} {{ struct.owner_ticker|default:''|lower }}"
            data-vuln-hour="{{ struct.vulnerability_hour|default_if_none:-1 }}"
            data-vuln="{{ struct.vulnerability_window|default:''|lower }}"
            data-core="{{ struct.core_status }}"
            data-state="{{ struct.state }}"
            data-verified="{{ struct.is_verified|yesno:'1,0' }}"
            data-moon-value="{{ struct.registry_moon_value|unlocalize }}"
            data-updated="{{ struct.updated_at|date:'U' }}"
            data-search-text="{{ struct.name }} {{ struct.location_details|default:'' }} {{ struct.structure_type.name|default:'' }} {{ struct.solar_system.name|default:'' }} {{ struct.registry_region }} {{ struct.owner_name }} {{ struct.owner_ticker|default:'' }} {{ struct.vulnerability_window|default:'' }} {{ struct.state }} {{ struct.core_status }} {% if struct.is_verified %}verified{% else %}unverified{% endif %}">
            <td class="sr-col-name {% if perms.hostile.manage_intel or struct.created_by == request.user %}editable-cell{% endif %}"
                data-field="name"
                data-structure-id="{{ struct.id }}"
                data-raw-value="{{ struct.name }}"
                title="{% if perms.hostile.manage_intel or struct.created_by == request.user %}{% translate 'Click to edit structure name' %}{% endif %}">
                <div class="cell-display-content d-flex align-items-center gap-2" style="min-width: 0;">
                    {% if struct.structure_type %}
                        <img src="https://images.evetech.net/types/{{ struct.structure_type.id }}/icon?size=32" alt="" class="sr-type-icon">
                    {% else %}
                        <i class="fas fa-building sr-muted text-center" style="width: 28px;"></i>
                    {% endif %}
                    <div style="min-width: 0;">
                        <div class="text-truncate">
                            <span class="structure-name-text">{{ struct.registry_display_name|default:struct.name }}</span>
                            {% if struct.is_verified %}<i class="fas fa-circle-check sr-verified ms-1" title="{% translate 'Verified' %}"></i>{% endif %}
                        </div>
                        <div class="sr-sub">{{ struct.structure_type.name|default:"Structure" }}<span class="location-details-text">{% if struct.location_details or struct.registry_location_details %} · {{ struct.registry_location_details|default:struct.location_details }}{% endif %}</span></div>
                    </div>
                </div>
            </td>
            <td class="{% if perms.hostile.manage_intel or struct.created_by == request.user %}editable-cell{% endif %}"
                data-field="owner"
                data-structure-id="{{ struct.id }}"
                data-raw-value="{% if struct.owner_ticker %}{{ struct.owner_ticker }}{% elif struct.alliance %}{{ struct.alliance.alliance_name }}{% elif struct.corporation %}{{ struct.corporation.corporation_name }}{% else %}{{ struct.owner_name }}{% endif %}"
                title="{{ struct.owner_name }}{% if perms.hostile.manage_intel or struct.created_by == request.user %} · {% translate 'Click to edit owner / ticker' %}{% endif %}">
                <div class="cell-display-content">
                    <span class="sr-ticker owner-ticker-badge">{% if struct.registry_group_ticker %}[{{ struct.registry_group_ticker }}]{% else %}{{ struct.owner_name }}{% endif %}</span>
                </div>
            </td>
            <td class="{% if perms.hostile.manage_intel or struct.created_by == request.user %}editable-cell{% endif %}"
                data-field="state"
                data-structure-id="{{ struct.id }}"
                data-raw-value="{{ struct.state }}"
                title="{% if perms.hostile.manage_intel or struct.created_by == request.user %}{% translate 'Click to edit state' %}{% endif %}">
                <div class="cell-display-content">
                    <span class="sr-state"><span class="dot s-{{ struct.state }}"></span>{{ struct.get_state_display }}</span>
                </div>
            </td>
            <td class="{% if perms.hostile.manage_intel or struct.created_by == request.user %}editable-cell{% endif %}"
                data-field="vulnerability"
                data-structure-id="{{ struct.id }}"
                data-raw-value="{% if struct.vulnerability_window %}{{ struct.vulnerability_window }}{% elif struct.vulnerability_hour is not None %}{{ struct.vulnerability_hour }}{% endif %}"
                title="{% if perms.hostile.manage_intel or struct.created_by == request.user %}{% translate 'Click to edit vulnerability' %}{% endif %}">
                <div class="cell-display-content">
                    {% if struct.vulnerability_window %}
                        <span class="sr-vuln"><i class="fas fa-shield-alt me-1"></i>{{ struct.vulnerability_window }}</span>
                    {% elif struct.vulnerability_hour is not None %}
                        <span class="sr-vuln"><i class="fas fa-shield-alt me-1"></i>{{ struct.vulnerability_hour }}:00 UTC</span>
                    {% else %}
                        <span class="sr-muted">—</span>
                    {% endif %}
                </div>
            </td>
            <td class="{% if perms.hostile.manage_intel or struct.created_by == request.user %}editable-cell{% endif %}"
                data-field="core_status"
                data-structure-id="{{ struct.id }}"
                data-raw-value="{{ struct.core_status }}"
                title="{% if perms.hostile.manage_intel or struct.created_by == request.user %}{% translate 'Click to edit quantum core' %}{% endif %}">
                <div class="cell-display-content">
                    {% if struct.core_status == "FITTED" %}
                        <span class="text-info small" title="{% translate 'Quantum core fitted' %}"><i class="fas fa-atom me-1"></i>{% translate "Core" %}</span>
                    {% elif struct.core_status == "UNFITTED" %}
                        <span class="text-danger small">{% translate "No core" %}</span>
                    {% else %}
                        <span class="sr-muted">—</span>
                    {% endif %}
                </div>
            </td>
            <td class="small">
                {% if struct.moonmining_match %}
                    <span class="sr-isk">{{ struct.moonmining_match.display_value }}</span>
                    <span class="sr-muted">/ {% translate "drill" %} {{ struct.moonmining_match.display_drill_value }}</span>
                {% elif struct.moon_scan_options %}
                    <select class="form-select form-select-sm moon-correlation-select no-searchable" data-structure-id="{{ struct.id }}" title="{% translate 'Correlate this drill with a moon scan' %}">
                        <option value="">{% translate "Correlate moon scan…" %}</option>
                        {% for moon in struct.moon_scan_options %}
                        <option value="{{ moon.eve_moon_id }}">{{ moon.eve_moon.name }}</option>
                        {% endfor %}
                    </select>
                {% else %}<span class="sr-muted">—</span>{% endif %}
            </td>
            <td class="sr-updated structure-updated-cell" title="{{ struct.updated_at|date:'Y-m-d H:i' }} UTC">{{ struct.updated_at|naturaltime|cut:" ago" }}</td>
            <td class="sr-actions">
                <div class="dropdown d-inline-block">
                    <button class="sr-act" type="button" data-bs-toggle="dropdown" data-bs-popper-config='{"strategy":"fixed"}' aria-expanded="false" title="{% translate 'Change Structure State' %}">
                        <i class="fas fa-exchange-alt"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-dark shadow border-secondary" style="z-index: 1080;">
                        <li><h6 class="dropdown-header small text-uppercase">{% translate "Change Structure State" %}</h6></li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="ONLINE">
                                <button type="submit" class="dropdown-item small text-success py-1"><i class="fas fa-check-circle me-2"></i>{% translate "Online" %}</button>
                            </form>
                        </li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="LOW_POWER">
                                <button type="submit" class="dropdown-item small text-warning py-1"><i class="fas fa-bolt me-2"></i>{% translate "Low Power" %}</button>
                            </form>
                        </li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="OFFLINE">
                                <button type="submit" class="dropdown-item small text-secondary py-1"><i class="fas fa-power-off me-2"></i>{% translate "Offline" %}</button>
                            </form>
                        </li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="ABANDONED">
                                <button type="submit" class="dropdown-item small text-warning py-1"><i class="fas fa-exclamation-triangle me-2"></i>{% translate "Abandoned" %}</button>
                            </form>
                        </li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="ARMOR">
                                <button type="submit" class="dropdown-item small text-danger py-1"><i class="fas fa-shield-alt me-2"></i>{% translate "Armor Reinforced" %}</button>
                            </form>
                        </li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="HULL">
                                <button type="submit" class="dropdown-item small text-danger py-1"><i class="fas fa-stopwatch me-2"></i>{% translate "Hull Reinforced" %}</button>
                            </form>
                        </li>
                        <li><hr class="dropdown-divider border-secondary my-1"></li>
                        <li>
                            <form action="{% url 'hostile:structure_set_state' struct.id %}" method="post" class="m-0 p-0">
                                {% csrf_token %}
                                <input type="hidden" name="state" value="DESTROYED">
                                <button type="submit" class="dropdown-item small text-danger fw-bold py-1"><i class="fas fa-skull me-2"></i>{% translate "Destroyed" %}</button>
                            </form>
                        </li>
                    </ul>
                </div>
                <a href="{% url 'hostile:calculator' %}?structure_id={{ struct.id }}" class="sr-act warn" title="{% translate 'Calculate Reinforce Exit Window' %}" data-hostile-loading="{% translate 'Loading Timer Calculator' %}" data-hostile-loading-detail="{% translate 'Importing structure vulnerability and geometry into calculation engine...' %}">
                    <i class="fas fa-calculator"></i>
                </a>
                <button type="button" class="sr-act" onclick="loadFittingModal({{ struct.id }})" title="{% translate 'Fitting' %}">
                    <i class="fas fa-crosshairs"></i>
                </button>
                {% if perms.hostile.manage_intel or struct.created_by == request.user %}
                <a href="{% url 'hostile:structure_edit' struct.id %}" class="sr-act" title="{% translate 'Edit Structure' %}">
                    <i class="fas fa-edit"></i>
                </a>
                {% endif %}
                {% if perms.hostile.manage_intel and not struct.is_verified %}
                <a href="{% url 'hostile:structure_verify' struct.id %}" class="sr-act ok" title="{% translate 'Verify Structure' %}">
                    <i class="fas fa-check"></i>
                </a>
                {% endif %}
                {% if perms.hostile.manage_intel %}
                <button type="button" class="sr-act danger" data-bs-toggle="modal" data-bs-target="#deleteStructureModal{{ struct.id }}" title="{% translate 'Delete Structure' %}">
                    <i class="fas fa-trash-alt"></i>
                </button>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>
{% endblock %}

{% block modals %}
{% if perms.hostile.manage_intel %}
<!-- Suspected Duplicates Review Queue Modal -->
<div class="modal fade" id="suspectedDuplicatesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content bg-dark text-white border-secondary">
            <div class="modal-header border-secondary">
                <h5 class="modal-title">
                    <i class="fas fa-layer-group text-info me-2"></i>{% translate "Suspected Duplicate Structures Review Queue" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-3">
                <div id="suspectedDuplicatesContent" class="{% if not suspected_duplicates %}d-none{% endif %}">
                    <p class="text-muted small mb-3">
                        {% translate "The following structure clusters have high similarity or matching characteristics in the same solar system. Review candidates and merge them into the verified primary structure." %}
                    </p>
                    <div id="suspectedClusterContainer" class="d-flex flex-column gap-3">
                        {% for group in suspected_duplicates %}
                        <div class="card bg-black bg-opacity-50 border-secondary suspected-cluster-card" data-primary-id="{{ group.primary.id }}">
                            <div class="card-header bg-dark border-secondary d-flex justify-content-between align-items-center py-2">
                                <div>
                                    <span class="badge bg-primary me-2"><i class="fas fa-solar-panel me-1"></i>{{ group.system.name }}</span>
                                    <span class="text-light small fw-bold">{{ group.reason }}</span>
                                </div>
                                <div>
                                    <span class="badge {% if group.confidence == 'HIGH' %}bg-danger{% else %}bg-warning text-dark{% endif %} me-2">
                                        {{ group.confidence }} {% translate "CONFIDENCE" %}
                                    </span>
                                    <form action="{% url 'hostile:structure_merge' %}" method="post" class="d-inline merge-cluster-form" data-hostile-loading="{% translate 'Merging duplicate structures' %}" data-hostile-loading-detail="{% translate 'Consolidating the selected structure records...' %}">
                                        {% csrf_token %}
                                        <input type="hidden" name="primary_structure_id" value="{{ group.primary.id }}">
                                        {% for d in group.duplicates %}
                                            <input type="hidden" name="duplicate_structure_ids" value="{{ d.id }}">
                                        {% endfor %}
                                        <button type="submit" class="btn btn-warning btn-sm fw-bold">
                                            <i class="fas fa-compress-alt me-1"></i>{% translate "Merge Cluster" %}
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-dark table-sm table-bordered mb-0 align-middle">
                                        <thead>
                                            <tr class="text-muted small">
                                                <th style="width: 15%;">{% translate "Role" %}</th>
                                                <th style="width: 35%;">{% translate "Structure Name" %}</th>
                                                <th style="width: 25%;">{% translate "Type" %}</th>
                                                <th style="width: 15%;">{% translate "Owner" %}</th>
                                                <th style="width: 10%;">{% translate "Status" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="table-success bg-opacity-25">
                                                <td><span class="badge bg-success">{% translate "PRIMARY TARGET" %}</span></td>
                                                <td class="fw-bold text-info">{{ group.primary.name }}</td>
                                                <td>{{ group.primary.structure_type.name|default:"Unknown Type" }}</td>
                                                <td>{{ group.primary.owner_ticker|default:group.primary.owner_name|default:"-" }}</td>
                                                <td>
                                                    {% if group.primary.is_verified %}
                                                        <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>{% translate "Verified" %}</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">{% translate "Unverified" %}</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% for d in group.duplicates %}
                                            <tr class="table-secondary bg-opacity-10 text-muted">
                                                <td><span class="badge bg-secondary">{% translate "DUPLICATE CANDIDATE" %}</span></td>
                                                <td>{{ d.name }}</td>
                                                <td>{{ d.structure_type.name|default:"Unknown Type" }}</td>
                                                <td>{{ d.owner_ticker|default:d.owner_name|default:"-" }}</td>
                                                <td>
                                                    {% if d.is_verified %}
                                                        <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>{% translate "Verified" %}</span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">{% translate "Unverified" %}</span>
                                                    {% endif %}
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div id="suspectedEmptyState" class="text-center py-5 text-muted {% if suspected_duplicates %}d-none{% endif %}">
                    <i class="fas fa-check-circle fa-3x text-success mb-3 d-block"></i>
                    <h5 class="text-white">{% translate "No Suspected Duplicate Structures" %}</h5>
                    <p class="small mb-0">{% translate "All tracked structure records in the database appear unique and consistent." %}</p>
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Close" %}</button>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- Add Structure Modal -->
<div class="modal fade" id="addStructureModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content bg-dark text-white border-secondary">
            <form action="{% url 'hostile:structure_add' %}" method="post">
                {% csrf_token %}
                <div class="modal-header border-secondary">
                    <h5 class="modal-title"><i class="fas fa-plus-circle text-primary me-2"></i>{% translate "Add Hostile Structure" %}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Structure Name" %}</label>
                            {{ structure_form.name }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Structure Type" %}</label>
                            {{ structure_form.structure_type }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Solar System" %}</label>
                            <div class="input-group">
                                <span class="input-group-text bg-black text-muted border-secondary"><i class="fas fa-map-marker-alt"></i></span>
                                <input type="text" id="structSystemSearchInput" class="form-control text-light bg-black border-secondary" placeholder="{% translate 'Search solar system (e.g. Jita, 1DQ1-A)...' %}" list="structSystemsDatalist" autocomplete="off" required>
                                <button class="btn btn-outline-secondary" type="button" id="clearStructSystemBtn" title="Clear"><i class="fas fa-times"></i></button>
                            </div>
                            <div class="d-none">
                                {{ structure_form.solar_system }}
                            </div>
                            <datalist id="structSystemsDatalist"></datalist>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Owner Ticker" %}</label>
                            {{ structure_form.owner_ticker }}
                            <div class="form-text text-muted small">{% translate "Auto-prefilled from alliance or corporation selection" %}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Alliance" %}</label>
                            {{ structure_form.alliance }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Corporation" %}</label>
                            {{ structure_form.corporation }}
                        </div>

                        <!-- Collapsible Untracked Entity Entry -->
                        <div class="col-12">
                            <a class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" href="#untrackedEntityCollapse" role="button" aria-expanded="false" aria-controls="untrackedEntityCollapse">
                                <i class="fas fa-plus me-1"></i>{% translate "Add Untracked Alliance or Corporation" %}
                            </a>
                        </div>
                        <div class="collapse col-12" id="untrackedEntityCollapse">
                            <div class="card card-body bg-black bg-opacity-50 border-secondary">
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Untracked Alliance Name / Ticker / ID" %}</label>
                                        {{ structure_form.untracked_alliance }}
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Untracked Corporation Name / Ticker / ID" %}</label>
                                        {{ structure_form.untracked_corporation }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "State / Status" %}</label>
                            {{ structure_form.state }}
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Quantum Core Status" %}</label>
                            {{ structure_form.core_status }}
                            <div class="form-text text-muted small" id="coreStatusHelp">{% translate "Anchoring structures automatically have no quantum core." %}</div>
                        </div>

                        <!-- Vulnerability Section -->
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">
                                <i class="fas fa-clock text-warning me-1"></i>{% translate "Vulnerability Hour (UTC 0-23)" %}
                            </label>
                            {{ structure_form.vulnerability_hour }}
                            <div class="form-text text-muted small">{% translate "Enter base hour set (e.g. 18). Window will auto-compute ±3 hours." %}</div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Vulnerability Window (Auto-filled ±3h)" %}</label>
                            {{ structure_form.vulnerability_window }}
                        </div>

                        <!-- Dynamic Structure Timer Creation Section -->
                        <div class="col-12" id="structureTimerSection">
                            <div class="card card-body bg-danger bg-opacity-10 border-danger border-opacity-50">
                                <h6 class="text-danger fw-bold mb-2">
                                    <i class="fas fa-stopwatch me-1"></i>{% translate "Structure Timer Creation" %}
                                </h6>
                                <p class="small text-muted mb-3">{% translate "Set the target exit timer for this anchoring or reinforced structure to register it on the Timer Board." %}</p>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Timer Type" %}</label>
                                        {{ structure_form.timer_stage }}
                                        <div class="form-text text-muted small" id="timerStageHelpText">{% translate "Available reinforcement stages depend on structure type." %}</div>
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Target Exit DateTime (UTC)" %}</label>
                                        {{ structure_form.timer_datetime }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Location Details" %}</label>
                            {{ structure_form.location_details }}
                        </div>
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold text-uppercase">{% translate "Notes & Intelligence" %}</label>
                            {{ structure_form.notes }}
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                    <button type="submit" class="btn btn-primary fw-bold"><i class="fas fa-save me-1"></i>{% translate "Save Structure" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% if perms.hostile.manage_intel %}
{% for struct in structures %}
<!-- Delete Structure Modal for {{ struct.name }} -->
<div class="modal fade text-start" id="deleteStructureModal{{ struct.id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-white border-secondary">
            <div class="modal-header border-secondary">
                <h5 class="modal-title fw-bold text-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>{% translate "Delete Structure" %}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-light">
                <p>{% blocktranslate with name=struct.name system=struct.solar_system.name %}Are you sure you want to permanently delete structure <strong>{{ name }}</strong> in <strong>{{ system }}</strong>?{% endblocktranslate %}</p>
                <div class="alert alert-warning py-2 small mb-0">
                    <i class="fas fa-info-circle me-1"></i>{% translate "This action cannot be undone. All associated fittings and active timers will be removed." %}
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Cancel" %}</button>
                <form action="{% url 'hostile:structure_delete' struct.id %}" method="post" class="d-inline">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-sm fw-bold">
                        <i class="fas fa-trash-alt me-1"></i>{% translate "Delete Structure" %}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endfor %}
{% endif %}
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
document.addEventListener("DOMContentLoaded", function() {
    attachSolarSystemAutocomplete("structSystemSearchInput", "id_solar_system", "structSystemsDatalist", "clearStructSystemBtn");

    const allianceSelect = document.getElementById("id_alliance");
    const corpSelect = document.getElementById("id_corporation");
    const tickerInput = document.getElementById("id_owner_ticker");
    const vulnHourInput = document.getElementById("id_vulnerability_hour");
    const vulnWindowInput = document.getElementById("id_vulnerability_window");
    const stateSelect = document.getElementById("id_state");
    const coreSelect = document.getElementById("id_core_status");
    const timerSection = document.getElementById("structureTimerSection");
    const timerStageSelect = document.getElementById("id_timer_stage");
    const structureTypeSelect = document.getElementById("id_structure_type");
    const timerStageHelp = document.getElementById("timerStageHelpText");

    const ALL_TIMER_STAGES = {
        ANCHORING: { value: "ANCHORING", text: "{% translate 'Anchoring Timer' %}" },
        ARMOR: { value: "ARMOR", text: "{% translate 'Armor Reinforce Timer' %}" },
        HULL: { value: "HULL", text: "{% translate 'Hull Reinforce Timer' %}" },
        REINFORCED: { value: "REINFORCED", text: "{% translate 'Reinforced (General)' %}" }
    };

    function inferStructureCategoryFromText(name) {
        if (!name) return "UNKNOWN";
        const n = name.toLowerCase();
        if (n.includes("ansiblex") || n.includes("pharolux") || n.includes("tenebrex") || n.includes("metenox") || n.includes("moon drill") || n.includes("drill") || n.includes("jump gate") || n.includes("cyno beacon") || n.includes("cyno jammer") || n.includes("flex")) {
            return "FLEX";
        }
        if (n.includes("fortizar") || n.includes("azbel") || n.includes("tatara") || n.includes("keepstar") || n.includes("sotiyo") || n.includes("faction fortizar") || n.includes("palatine")) {
            return "LARGE_XL";
        }
        if (n.includes("astrahus") || n.includes("raitaru") || n.includes("athanor") || n.includes("citadel") || n.includes("refinery") || n.includes("engineering")) {
            return "MEDIUM";
        }
        if (n.includes("customs office") || n.includes("poco")) {
            return "POCO";
        }
        return "UNKNOWN";
    }

    function updateAvailableTimerStages() {
        if (!timerStageSelect) return;
        const state = stateSelect ? stateSelect.value : "ONLINE";
        const structText = structureTypeSelect && structureTypeSelect.selectedIndex >= 0 ? structureTypeSelect.options[structureTypeSelect.selectedIndex].text : "";
        const cat = inferStructureCategoryFromText(structText);
        const currentStage = timerStageSelect.value;

        let stages = [];
        let helpNote = "";

        if (cat === "MEDIUM" || cat === "POCO") {
            stages = [ALL_TIMER_STAGES.ANCHORING, ALL_TIMER_STAGES.ARMOR];
            helpNote = "{% translate 'Medium structures and POCOs have no hull timer (hull is vulnerable immediately after armor).' %}";
        } else if (cat === "FLEX") {
            stages = [ALL_TIMER_STAGES.ANCHORING, ALL_TIMER_STAGES.HULL];
            helpNote = "{% translate 'FLEX structures have no armor timer (shield drops directly to vulnerable armor).' %}";
        } else if (cat === "LARGE_XL") {
            stages = [ALL_TIMER_STAGES.ANCHORING, ALL_TIMER_STAGES.ARMOR, ALL_TIMER_STAGES.HULL];
            helpNote = "{% translate 'Large/XL structures feature two reinforcement cycles (Armor and Final Hull).' %}";
        } else {
            stages = [ALL_TIMER_STAGES.ANCHORING, ALL_TIMER_STAGES.ARMOR, ALL_TIMER_STAGES.HULL, ALL_TIMER_STAGES.REINFORCED];
        }

        // Rebuild options
        timerStageSelect.innerHTML = "";
        stages.forEach(s => {
            const opt = document.createElement("option");
            opt.value = s.value;
            opt.textContent = s.text;
            timerStageSelect.appendChild(opt);
        });

        // Retain selection if valid, or select based on state
        if (state === "ANCHORING") {
            timerStageSelect.value = "ANCHORING";
        } else if (state === "ARMOR" || state === "REINFORCED") {
            if (cat === "FLEX") {
                timerStageSelect.value = "HULL";
            } else {
                timerStageSelect.value = "ARMOR";
            }
        } else if (state === "HULL") {
            if (cat === "MEDIUM" || cat === "POCO") {
                timerStageSelect.value = "ARMOR";
            } else {
                timerStageSelect.value = "HULL";
            }
        } else if (stages.some(s => s.value === currentStage)) {
            timerStageSelect.value = currentStage;
        } else if (stages.length > 0) {
            timerStageSelect.value = stages[0].value;
        }

        if (timerStageHelp) {
            timerStageHelp.textContent = helpNote || "{% translate 'Available reinforcement stages depend on structure type.' %}";
        }
    }

    function updateModalCorporationDropdown(allianceId, preserveCorpId) {
        if (!corpSelect) return;
        const currentVal = preserveCorpId !== undefined ? preserveCorpId : corpSelect.value;
        let url = `/hostile/api/corporations/?limit=250`;
        if (allianceId) {
            url += `&alliance_id=${encodeURIComponent(allianceId)}`;
        }
        fetch(url)
            .then(r => r.json())
            .then(data => {
                const results = data.results || [];
                const previousVal = currentVal;
                corpSelect.innerHTML = '<option value="">---------</option>';
                let foundPrevious = false;
                results.forEach(corp => {
                    const opt = document.createElement("option");
                    opt.value = corp.id;
                    opt.textContent = corp.ticker ? `${corp.corporation_name} [${corp.ticker}]` : corp.corporation_name;
                    if (String(corp.id) === String(previousVal)) {
                        opt.selected = true;
                        foundPrevious = true;
                    }
                    corpSelect.appendChild(opt);
                });
                if (!foundPrevious && previousVal && allianceId) {
                    corpSelect.value = "";
                }
                if (corpSelect.syncSearchableSelect) {
                    corpSelect.syncSearchableSelect();
                }
            })
            .catch(() => {});
    }

    // Auto-fill ticker on alliance selection and filter corporation dropdown
    if (allianceSelect) {
        allianceSelect.addEventListener("change", function() {
            const allianceId = allianceSelect.value;
            updateModalCorporationDropdown(allianceId);

            const selectedText = allianceSelect.options[allianceSelect.selectedIndex]?.text || '';
            const match = selectedText.match(/\[(.*?)\]/);
            if (tickerInput) {
                if (match && match[1]) {
                    tickerInput.value = match[1];
                } else if (allianceId) {
                    fetch(`/hostile/api/alliance-resolve/?query=${encodeURIComponent(allianceId)}`)
                        .then(r => r.json())
                        .then(data => {
                            if (data.success && data.alliance && data.alliance.ticker) {
                                tickerInput.value = data.alliance.ticker;
                            }
                        }).catch(() => {});
                } else {
                    tickerInput.value = "";
                }
            }
        });
    }

    // Auto-fill ticker and alliance on corporation selection
    if (corpSelect) {
        corpSelect.addEventListener("change", function() {
            const selectedText = corpSelect.options[corpSelect.selectedIndex]?.text || '';
            const match = selectedText.match(/\[(.*?)\]/);
            if (match && match[1] && tickerInput && (!tickerInput.value || !allianceSelect.value)) {
                tickerInput.value = match[1];
            }
            if (corpSelect.value) {
                fetch(`/hostile/api/corporation-resolve/?query=${encodeURIComponent(corpSelect.value)}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data.success && data.corporation) {
                            if (tickerInput && (!tickerInput.value || (allianceSelect && !allianceSelect.value))) {
                                if (data.corporation.ticker) {
                                    tickerInput.value = data.corporation.ticker;
                                }
                            }
                            if (allianceSelect && !allianceSelect.value && data.corporation.alliance_pk) {
                                allianceSelect.value = String(data.corporation.alliance_pk);
                                if (allianceSelect.syncSearchableSelect) {
                                    allianceSelect.syncSearchableSelect();
                                }
                            }
                        }
                    }).catch(() => {});
            }
        });
    }

    // Vulnerability hour -> +-3 hour window auto computation
    function updateVulnerabilityWindow() {
        if (!vulnHourInput) return;
        const val = parseInt(vulnHourInput.value, 10);
        if (!isNaN(val) && val >= 0 && val <= 23) {
            const startHour = (val - 3 + 24) % 24;
            const endHour = (val + 3) % 24;
            const pad = n => String(n).padStart(2, '0');
            vulnWindowInput.value = `${pad(startHour)}:00 - ${pad(endHour)}:00 UTC`;
        }
    }

    if (vulnHourInput) {
        vulnHourInput.addEventListener("input", updateVulnerabilityWindow);
        vulnHourInput.addEventListener("change", updateVulnerabilityWindow);
    }

    // Status / Anchoring / Timer visibility handling
    function updateStateHandling() {
        if (!stateSelect) return;
        const state = stateSelect.value;
        if (state === "ANCHORING") {
            if (coreSelect) {
                coreSelect.value = "UNFITTED";
            }
            if (timerSection) {
                timerSection.style.display = "block";
            }
            if (timerStageSelect) {
                timerStageSelect.value = "ANCHORING";
            }
        } else if (["ARMOR", "HULL", "REINFORCED"].includes(state)) {
            if (timerSection) {
                timerSection.style.display = "block";
            }
            if (timerStageSelect) {
                timerStageSelect.value = state === "REINFORCED" ? "ARMOR" : state;
            }
        } else {
            if (timerSection) {
                // Keep visible if datetime is filled, otherwise collapsed
                const timerDt = document.getElementById("id_timer_datetime");
                if (timerDt && timerDt.value) {
                    timerSection.style.display = "block";
                } else {
                    timerSection.style.display = "none";
                }
            }
        }
    }

    if (structureTypeSelect) {
        structureTypeSelect.addEventListener("change", function() {
            updateAvailableTimerStages();
        });
    }

    if (stateSelect) {
        stateSelect.addEventListener("change", function() {
            updateStateHandling();
            updateAvailableTimerStages();
        });
        updateStateHandling();
    }

    updateAvailableTimerStages();

    // ==========================================
    // 1. Alliance › Region › System Grouping, Search & Filters
    // ==========================================
    // Server-rendered rows live in #structureRowPool; render() moves the row elements into
    // generated group containers, so their inline-edit listeners and action forms survive.
    const groupsEl = document.getElementById("structureGroups");
    const rowPool = document.getElementById("structureRowPool");
    const colgroupTemplate = document.getElementById("structureColgroup");
    const searchInput = document.getElementById("structureSearchInput");
    const clearSearchBtn = document.getElementById("clearStructureSearchBtn");
    const stateFilter = document.getElementById("structureStateFilter");
    const coreFilter = document.getElementById("structureCoreFilter");
    const chipsEl = document.getElementById("structureChips");
    const depthEl = document.getElementById("structureDepth");
    const resetFiltersBtn = document.getElementById("resetStructureFiltersBtn");
    const summaryEl = document.getElementById("structureSummary");
    const noMatchRow = document.getElementById("noStructureMatchRow");

    const I18N = {
        active: "{{ _('active')|escapejs }}",
        destroyed: "{{ _('destroyed')|escapejs }}",
        region: "{{ _('region')|escapejs }}",
        regions: "{{ _('regions')|escapejs }}",
        system: "{{ _('system')|escapejs }}",
        systems: "{{ _('systems')|escapejs }}",
        structure: "{{ _('structure')|escapejs }}",
        structures: "{{ _('structures')|escapejs }}",
        alliance: "{{ _('owner')|escapejs }}",
        alliances: "{{ _('owners')|escapejs }}",
        shared: "{{ _('shared')|escapejs }}",
        sharedSystem: "{{ _('shared system')|escapejs }}",
        sharedSystems: "{{ _('shared systems')|escapejs }}",
        also: "{{ _('also')|escapejs }}",
        of: "{{ _('of')|escapejs }}",
        iskPerMonth: "{{ _('ISK/mo')|escapejs }}",
        alsoHere: "{{ _('Other owners also have structures in this system')|escapejs }}",
        clickToJump: "{{ _('Click to jump.')|escapejs }}",
        openOwner: "{{ _('Open owner intel')|escapejs }}",
        noStructures: "{{ _('No structures recorded yet. Add structures manually or use the universal Smart Ingest button.')|escapejs }}",
    };

    // Amber is reserved for the shared-system indicator, so it is not an owner accent.
    const ACCENTS = ["#58a6ff", "#d2a8ff", "#f778ba", "#3fb950", "#56d4dd", "#ff7b72"];
    const LEVELS = ["alliance", "region", "system"];

    let activeChip = "";
    let depth = 3;          // groups at level >= depth start collapsed
    let overrides = {};     // group key -> collapsed, set by clicking a header; cleared when depth changes
    let currentSortColumn = null;
    let currentSortDir = "asc";
    let OWNER_INFO = {};    // group key -> {accent, name, ticker, url}
    let SYSTEM_OWNERS = {}; // system name -> {group key -> structure count}

    function allRows() {
        return Array.from(document.querySelectorAll("tr.structure-row"));
    }

    function plural(n, one, many) {
        return `${n} ${n === 1 ? one : many}`;
    }

    // Mirrors format_isk() in hostile/services/moonmining_integration.py
    function formatIsk(value) {
        const trim = s => s.replace(/\.0$/, "");
        const abs = Math.abs(value);
        if (abs >= 1e9) return trim((value / 1e9).toFixed(1)) + "b";
        if (abs >= 1e6) return trim((value / 1e6).toFixed(1)) + "m";
        if (abs >= 1e3) return trim((value / 1e3).toFixed(1)) + "k";
        return value.toFixed(0);
    }

    function moonValue(row) {
        return parseFloat(row.dataset.moonValue) || 0;
    }

    function moonTotal(rows) {
        return rows.reduce((sum, r) => sum + moonValue(r), 0);
    }

    function isDestroyed(row) {
        return row.dataset.state === "DESTROYED";
    }

    // Mirrors _registry_owner_group() in hostile/views.py
    function registryGroupKey(data) {
        if (data.alliance_id) return `a${data.alliance_id}`;
        if (data.corporation_id) return `c${data.corporation_id}`;
        if (data.owner_ticker) return `t${data.owner_ticker.toLowerCase()}`;
        return "unknown";
    }

    // Groups items by keyFn preserving first-seen order; returns [[key, items], ...]
    function groupBy(items, keyFn) {
        const map = new Map();
        items.forEach(item => {
            const k = keyFn(item);
            if (!map.has(k)) map.set(k, []);
            map.get(k).push(item);
        });
        return Array.from(map.entries());
    }

    // Owner colours and system ownership come from every row, not just the visible ones,
    // so accents stay stable and shared-system context survives filtering.
    function rebuildOwnership() {
        const rows = allRows();
        OWNER_INFO = {};
        groupBy(rows, r => r.dataset.groupKey)
            .sort((a, b) => b[1].length - a[1].length || a[1][0].dataset.groupName.localeCompare(b[1][0].dataset.groupName))
            .forEach(([key, list], i) => {
                const first = list[0].dataset;
                OWNER_INFO[key] = {
                    accent: ACCENTS[i % ACCENTS.length],
                    name: first.groupName,
                    ticker: first.groupTicker,
                    url: first.groupUrl,
                };
            });
        SYSTEM_OWNERS = {};
        rows.forEach(r => {
            const system = r.dataset.systemName;
            if (r.dataset.system === "unknown") return;
            const owners = SYSTEM_OWNERS[system] = SYSTEM_OWNERS[system] || {};
            owners[r.dataset.groupKey] = (owners[r.dataset.groupKey] || 0) + 1;
        });
    }

    function otherOwners(system, ownerKey) {
        return Object.entries(SYSTEM_OWNERS[system] || {})
            .filter(([key]) => key !== ownerKey)
            .sort((a, b) => b[1] - a[1]);
    }

    function sharedSystemCount(rows, ownerKey) {
        return new Set(rows.map(r => r.dataset.systemName).filter(sys => otherOwners(sys, ownerKey).length)).size;
    }

    function sharedBadge(system, region, ownerKey) {
        const others = otherOwners(system, ownerKey);
        if (!others.length) return "";
        const chips = others.map(([key, n]) => {
            const info = OWNER_INFO[key];
            const label = info.ticker ? `[${escapeHtml(info.ticker)}]` : escapeHtml(info.name);
            return `<span class="owner-chip" style="--c:${info.accent}" data-jump="${escapeHtml(`${key}|${region}|${system}`)}"
                title="${escapeHtml(info.name)}: ${plural(n, I18N.structure, I18N.structures)}. ${I18N.clickToJump}">${label}<span class="n">${n}</span></span>`;
        }).join('<span class="sep">·</span>');
        return `<span class="shared" title="${I18N.alsoHere}"><i class="fas fa-exchange-alt me-1"></i>${I18N.also} ${chips}</span>`;
    }

    function activeMeta(rows) {
        const alive = rows.filter(r => !isDestroyed(r)).length;
        const dead = rows.length - alive;
        return `<span><b>${alive}</b> ${I18N.active}${dead ? ` · ${dead} ${I18N.destroyed}` : ""}</span>`;
    }

    function moonMeta(rows, suffix) {
        const total = moonTotal(rows);
        return total ? `<span><i class="fas fa-moon me-1"></i><b class="sr-isk">${formatIsk(total)}</b>${suffix ? " " + I18N.iskPerMonth : ""}</span>` : "";
    }

    function pips(rows) {
        return `<span class="state-pips">${rows.map(r => `<span class="s-${escapeHtml(r.dataset.state)}" title="${escapeHtml(r.querySelector(".structure-name-text")?.textContent || "")}"></span>`).join("")}</span>`;
    }

    function isCollapsed(key, level) {
        return key in overrides ? overrides[key] : level >= depth;
    }

    function groupHtml(level, key, headInner, bodyInner) {
        return `<div class="grp lvl-${LEVELS[level]}${isCollapsed(key, level) ? " collapsed" : ""}" data-key="${escapeHtml(key)}">
            <div class="grp-head"><i class="fas fa-chevron-down caret"></i>${headInner}</div>
            <div class="grp-body">${bodyInner}</div>
        </div>`;
    }

    function rowMatches(row, terms) {
        const text = (row.dataset.searchText || "").toLowerCase();
        if (!terms.every(t => text.includes(t))) return false;
        if (activeChip === "unverified" && row.dataset.verified !== "0") return false;
        if (activeChip === "moon" && !moonValue(row)) return false;
        if (activeChip && activeChip === activeChip.toUpperCase() && row.dataset.state !== activeChip) return false;
        if (stateFilter && stateFilter.value && row.dataset.state !== stateFilter.value) return false;
        if (coreFilter && coreFilter.value && row.dataset.core !== coreFilter.value) return false;
        return true;
    }

    function compareRows(a, b) {
        const dir = currentSortDir === "asc" ? 1 : -1;
        const text = key => (a.dataset[key] || "").localeCompare(b.dataset[key] || "") * dir;
        const num = (key, fallback) => (parseFloat(a.dataset[key] || fallback) - parseFloat(b.dataset[key] || fallback)) * dir;
        switch (currentSortColumn) {
            case "name": return text("name");
            case "owner": return text("owner");
            case "state": return text("state");
            case "core": return text("core");
            case "vulnerability": return num("vulnHour", "-1") || text("vuln");
            case "moon": return (moonValue(a) - moonValue(b)) * dir;
            case "updated": return num("updated", "0");
            default: return parseInt(a.dataset.order, 10) - parseInt(b.dataset.order, 10);
        }
    }

    function render() {
        const query = (searchInput ? searchInput.value : "").toLowerCase().trim();
        if (clearSearchBtn) clearSearchBtn.classList.toggle("d-none", query.length === 0);
        const terms = query ? query.split(/\s+/).filter(Boolean) : [];

        const rows = allRows();
        // Park every row back in the pool before the group containers are replaced.
        rows.forEach(r => rowPool.appendChild(r));
        const visible = rows.filter(r => rowMatches(r, terms)).sort(compareRows);

        const bodies = [];  // [tbodyId, rows] filled into the skeleton after it is inserted
        const owners = groupBy(visible, r => r.dataset.groupKey)
            .sort((a, b) => b[1].length - a[1].length || OWNER_INFO[a[0]].name.localeCompare(OWNER_INFO[b[0]].name));

        const html = owners.map(([ownerKey, oRows]) => {
            const info = OWNER_INFO[ownerKey];
            const regions = groupBy(oRows, r => r.dataset.region).sort((a, b) => a[0].localeCompare(b[0]));

            const regionsHtml = regions.map(([region, rRows]) => {
                const rKey = `${ownerKey}|${region}`;
                const systems = groupBy(rRows, r => r.dataset.systemName).sort((a, b) => a[0].localeCompare(b[0]));
                const rShared = sharedSystemCount(rRows, ownerKey);

                const systemsHtml = systems.map(([system, sRows]) => {
                    const bodyId = `srBody${bodies.length}`;
                    bodies.push([bodyId, sRows]);
                    return groupHtml(2, `${rKey}|${system}`,
                        `<span class="sys-name">${escapeHtml(system)}</span>
                        <span class="meta">${activeMeta(sRows)}${moonMeta(sRows, false)}</span>
                        ${sharedBadge(system, region, ownerKey)}
                        ${pips(sRows)}`,
                        `<table class="sr-table">${colgroupTemplate.outerHTML.replace(/ id="[^"]*"/, "")}<tbody id="${bodyId}"></tbody></table>`);
                }).join("");

                return groupHtml(1, rKey,
                    `<span class="r-name"><i class="fas fa-map me-2"></i>${escapeHtml(region)}</span>
                    <span class="meta">
                        <span>${plural(systems.length, I18N.system, I18N.systems)}</span>
                        <span>${plural(rRows.length, I18N.structure, I18N.structures)}</span>
                        ${moonMeta(rRows, true)}
                        ${rShared ? `<span class="shared-count"><i class="fas fa-exchange-alt me-1"></i>${rShared} ${I18N.shared}</span>` : ""}
                    </span>
                    ${pips(rRows)}`,
                    systemsHtml);
            }).join("");

            const systemCount = new Set(oRows.map(r => r.dataset.systemName)).size;
            const aShared = sharedSystemCount(oRows, ownerKey);
            const showTicker = info.ticker && info.ticker !== info.name;
            return `<div style="--accent:${info.accent}">${groupHtml(0, ownerKey,
                `<div>
                    <span class="a-swatch"></span><span class="a-name">${escapeHtml(info.name)}</span>${showTicker ? `<span class="a-ticker">[${escapeHtml(info.ticker)}]</span>` : ""}
                    ${info.url ? `<a href="${escapeHtml(info.url)}" class="a-link" title="${I18N.openOwner}"><i class="fas fa-external-link-alt"></i></a>` : ""}
                    <div class="meta mt-1">
                        ${activeMeta(oRows)}
                        <span>${plural(regions.length, I18N.region, I18N.regions)} · ${plural(systemCount, I18N.system, I18N.systems)}</span>
                        ${moonMeta(oRows, true)}
                        ${aShared ? `<span class="shared-count"><i class="fas fa-exchange-alt me-1"></i>${aShared} ${aShared === 1 ? I18N.sharedSystem : I18N.sharedSystems}</span>` : ""}
                    </div>
                </div>
                ${pips(oRows)}`,
                regionsHtml)}</div>`;
        }).join("");

        if (!rows.length) {
            groupsEl.innerHTML = `<div class="sr-empty"><i class="fas fa-monument fa-3x mb-3 d-block"></i><p class="mb-0">${I18N.noStructures}</p></div>`;
        } else {
            groupsEl.innerHTML = html;
            bodies.forEach(([id, list]) => {
                const tbody = document.getElementById(id);
                list.forEach(r => tbody.appendChild(r));
            });
        }
        if (noMatchRow) noMatchRow.classList.toggle("d-none", visible.length > 0 || rows.length === 0);

        if (summaryEl && rows.length) {
            const regionCount = new Set(visible.map(r => r.dataset.region)).size;
            const systemCount = new Set(visible.map(r => r.dataset.systemName)).size;
            summaryEl.innerHTML = `<span id="structureVisibleCount">${visible.length}</span> ${I18N.of} ${plural(rows.length, I18N.structure, I18N.structures)}
                · ${plural(owners.length, I18N.alliance, I18N.alliances)} · ${plural(regionCount, I18N.region, I18N.regions)} · ${plural(systemCount, I18N.system, I18N.systems)}`;
        }
    }

    // Expands the path to owner|region|system, clearing filters if they hide it, then scrolls there.
    function jumpTo(key) {
        const parts = key.split("|");
        for (let i = 1; i <= parts.length; i++) overrides[parts.slice(0, i).join("|")] = false;
        render();
        const find = () => document.querySelector(`.grp[data-key="${CSS.escape(key)}"]`);
        let target = find();
        if (!target) {
            resetFilters(false);
            render();
            target = find();
        }
        if (!target) return;
        target.scrollIntoView({behavior: "smooth", block: "center"});
        target.classList.remove("flash");
        void target.offsetWidth;
        target.classList.add("flash");
    }

    function resetFilters(rerender = true) {
        if (searchInput) searchInput.value = "";
        if (stateFilter) stateFilter.value = "";
        if (coreFilter) coreFilter.value = "";
        activeChip = "";
        if (chipsEl) chipsEl.querySelectorAll(".sr-chip").forEach(c => c.classList.toggle("active", c.dataset.filter === ""));
        if (rerender) render();
    }

    if (groupsEl) {
        groupsEl.addEventListener("click", function(e) {
            const chip = e.target.closest(".owner-chip");
            if (chip) {
                e.stopPropagation();
                jumpTo(chip.dataset.jump);
                return;
            }
            if (e.target.closest("a")) return;
            const head = e.target.closest(".grp-head");
            if (!head) return;
            const grp = head.parentElement;
            overrides[grp.dataset.key] = grp.classList.toggle("collapsed");
        });
    }
    if (chipsEl) {
        chipsEl.addEventListener("click", function(e) {
            const chip = e.target.closest(".sr-chip");
            if (!chip) return;
            activeChip = chip.dataset.filter;
            chipsEl.querySelectorAll(".sr-chip").forEach(c => c.classList.toggle("active", c === chip));
            render();
        });
    }
    if (depthEl) {
        depthEl.addEventListener("click", function(e) {
            const btn = e.target.closest("button");
            if (!btn) return;
            depth = parseInt(btn.dataset.depth, 10);
            overrides = {};
            depthEl.querySelectorAll("button").forEach(b => b.classList.toggle("on", b === btn));
            render();
        });
    }
    if (searchInput) searchInput.addEventListener("input", () => render());
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener("click", function() {
            searchInput.value = "";
            searchInput.focus();
            render();
        });
    }
    if (stateFilter) stateFilter.addEventListener("change", () => render());
    if (coreFilter) coreFilter.addEventListener("change", () => render());
    if (resetFiltersBtn) resetFiltersBtn.addEventListener("click", () => resetFilters());

    // ==========================================
    // 2. Column Sorting (within each system group)
    // ==========================================
    const sortHeaders = document.querySelectorAll(".sortable-th");
    sortHeaders.forEach(th => {
        th.addEventListener("click", function() {
            const sortKey = this.dataset.sort;
            if (!sortKey) return;
            if (currentSortColumn === sortKey) {
                currentSortDir = currentSortDir === "asc" ? "desc" : "asc";
            } else {
                currentSortColumn = sortKey;
                currentSortDir = "asc";
            }
            sortHeaders.forEach(header => {
                header.classList.remove("active-sort");
                const icon = header.querySelector(".sort-icon");
                if (icon) icon.className = "fas fa-sort sort-icon ms-1";
            });
            this.classList.add("active-sort");
            const icon = this.querySelector(".sort-icon");
            if (icon) icon.className = `fas fa-sort-${currentSortDir === "asc" ? "up" : "down"} sort-icon ms-1`;
            render();
        });
    });

    // ==========================================
    // 3. Click-to-Edit Inline Cell Editing
    // ==========================================
    let activeEditingCell = null;

    function getCsrfToken() {
        const input = document.querySelector('[name=csrfmiddlewaretoken]');
        if (input && input.value) return input.value;
        const cookie = document.cookie.split(';').find(c => c.trim().startsWith('csrftoken='));
        if (cookie) return cookie.split('=')[1].trim();
        return '';
    }

    function escapeHtml(str) {
        if (!str) return "";
        return String(str)
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function cancelActiveEdit() {
        if (!activeEditingCell) return;
        const originalHtml = activeEditingCell.dataset.originalHtml;
        if (originalHtml !== undefined) {
            activeEditingCell.innerHTML = originalHtml;
        }
        activeEditingCell.classList.remove("is-editing");
        activeEditingCell = null;
    }

    document.addEventListener("click", function(e) {
        if (activeEditingCell && !activeEditingCell.contains(e.target)) {
            cancelActiveEdit();
        }
    });

    function renderStateBadge(state, stateDisplay) {
        return `<span class="sr-state"><span class="dot s-${escapeHtml(state)}"></span>${escapeHtml(stateDisplay || state)}</span>`;
    }

    function renderCoreBadge(coreStatus) {
        if (coreStatus === "FITTED") {
            return `<span class="text-info small" title="{{ _('Quantum core fitted')|escapejs }}"><i class="fas fa-atom me-1"></i>{{ _('Core')|escapejs }}</span>`;
        } else if (coreStatus === "UNFITTED") {
            return `<span class="text-danger small">{{ _('No core')|escapejs }}</span>`;
        }
        return `<span class="sr-muted">—</span>`;
    }

    function renderVulnBadge(vulnDisplay) {
        if (vulnDisplay && vulnDisplay !== "Unknown") {
            return `<span class="sr-vuln"><i class="fas fa-shield-alt me-1"></i>${escapeHtml(vulnDisplay)}</span>`;
        }
        return `<span class="sr-muted">—</span>`;
    }

    function renderOwnerContent(data) {
        const label = data.owner_ticker ? `[${escapeHtml(data.owner_ticker)}]` : escapeHtml(data.owner_name || "Unknown");
        return `<span class="sr-ticker owner-ticker-badge">${label}</span>`;
    }

    // The name cell also holds the type icon and type name, so restore it and patch the text.
    function patchNameContent(cell, data) {
        cell.innerHTML = cell.dataset.originalHtml || "";
        const nameEl = cell.querySelector(".structure-name-text");
        if (nameEl) nameEl.textContent = data.name;
        const locEl = cell.querySelector(".location-details-text");
        if (locEl) locEl.textContent = data.location_details ? ` · ${data.location_details}` : "";
    }

    function updateRowSearchText(row) {
        if (!row) return;
        const d = row.dataset;
        const verified = d.verified === "1" ? "verified" : "unverified";
        row.dataset.searchText = [d.name, d.type, d.system, d.region, d.groupName, d.owner, d.vuln, d.state, d.core, verified].join(" ");
    }

    // Re-render after a state/owner edit, keeping the edited row's groups open and flashing it.
    function regroupAfterEdit(row) {
        const key = `${row.dataset.groupKey}|${row.dataset.region}|${row.dataset.systemName}`;
        const parts = key.split("|");
        for (let i = 1; i <= parts.length; i++) overrides[parts.slice(0, i).join("|")] = false;
        render();
    }

    function initEditableCells() {
        document.querySelectorAll(".editable-cell").forEach(cell => {
            cell.addEventListener("click", function(e) {
                if (this.classList.contains("is-editing")) return;
                if (e.target.tagName === "A") return;

                e.stopPropagation();

                if (activeEditingCell && activeEditingCell !== this) {
                    cancelActiveEdit();
                }

                activeEditingCell = this;
                this.classList.add("is-editing");
                this.dataset.originalHtml = this.innerHTML;

                const field = this.dataset.field;
                const structureId = this.dataset.structureId;
                const rawValue = this.dataset.rawValue || "";

                let controlHtml = "";
                if (field === "name") {
                    controlHtml = `
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control form-control-sm bg-dark text-white border-info inline-edit-input" value="${escapeHtml(rawValue)}" placeholder="Structure Name">
                            <button class="btn btn-sm btn-success btn-inline-save" type="button" title="Save (Enter)"><i class="fas fa-check"></i></button>
                            <button class="btn btn-sm btn-outline-secondary btn-inline-cancel" type="button" title="Cancel (Esc)"><i class="fas fa-times"></i></button>
                        </div>`;
                } else if (field === "owner") {
                    controlHtml = `
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control form-control-sm bg-dark text-white border-info inline-edit-input" value="${escapeHtml(rawValue)}" placeholder="Ticker or Name">
                            <button class="btn btn-sm btn-success btn-inline-save" type="button" title="Save (Enter)"><i class="fas fa-check"></i></button>
                            <button class="btn btn-sm btn-outline-secondary btn-inline-cancel" type="button" title="Cancel (Esc)"><i class="fas fa-times"></i></button>
                        </div>`;
                } else if (field === "vulnerability") {
                    controlHtml = `
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control form-control-sm bg-dark text-white border-info inline-edit-input" value="${escapeHtml(rawValue)}" placeholder="Hour (0-23) or Window">
                            <button class="btn btn-sm btn-success btn-inline-save" type="button" title="Save (Enter)"><i class="fas fa-check"></i></button>
                            <button class="btn btn-sm btn-outline-secondary btn-inline-cancel" type="button" title="Cancel (Esc)"><i class="fas fa-times"></i></button>
                        </div>`;
                } else if (field === "state") {
                    const cur = (rawValue || "").toUpperCase();
                    controlHtml = `
                        <div class="input-group input-group-sm">
                            <select class="form-select form-select-sm bg-dark text-white border-info inline-edit-input">
                                <option value="ONLINE" ${cur === 'ONLINE' ? 'selected' : ''}>Online</option>
                                <option value="LOW_POWER" ${cur === 'LOW_POWER' ? 'selected' : ''}>Low Power</option>
                                <option value="OFFLINE" ${cur === 'OFFLINE' ? 'selected' : ''}>Offline</option>
                                <option value="ABANDONED" ${cur === 'ABANDONED' ? 'selected' : ''}>Abandoned</option>
                                <option value="ANCHORING" ${cur === 'ANCHORING' ? 'selected' : ''}>Anchoring</option>
                                <option value="UNANCHORING" ${cur === 'UNANCHORING' ? 'selected' : ''}>Unanchoring</option>
                                <option value="ARMOR" ${cur === 'ARMOR' ? 'selected' : ''}>Armor Reinforced</option>
                                <option value="HULL" ${cur === 'HULL' ? 'selected' : ''}>Hull Reinforced</option>
                                <option value="REINFORCED" ${cur === 'REINFORCED' ? 'selected' : ''}>Reinforced</option>
                                <option value="DESTROYED" ${cur === 'DESTROYED' ? 'selected' : ''}>Destroyed</option>
                            </select>
                            <button class="btn btn-sm btn-success btn-inline-save" type="button" title="Save"><i class="fas fa-check"></i></button>
                            <button class="btn btn-sm btn-outline-secondary btn-inline-cancel" type="button" title="Cancel"><i class="fas fa-times"></i></button>
                        </div>`;
                } else if (field === "core_status") {
                    const cur = (rawValue || "").toUpperCase();
                    controlHtml = `
                        <div class="input-group input-group-sm">
                            <select class="form-select form-select-sm bg-dark text-white border-info inline-edit-input">
                                <option value="FITTED" ${cur === 'FITTED' ? 'selected' : ''}>Fitted (Installed)</option>
                                <option value="UNFITTED" ${cur === 'UNFITTED' ? 'selected' : ''}>No Core (Unfitted)</option>
                                <option value="UNKNOWN" ${cur === 'UNKNOWN' ? 'selected' : ''}>Unknown</option>
                            </select>
                            <button class="btn btn-sm btn-success btn-inline-save" type="button" title="Save"><i class="fas fa-check"></i></button>
                            <button class="btn btn-sm btn-outline-secondary btn-inline-cancel" type="button" title="Cancel"><i class="fas fa-times"></i></button>
                        </div>`;
                }

                this.innerHTML = controlHtml;
                const inputEl = this.querySelector(".inline-edit-input");
                const saveBtn = this.querySelector(".btn-inline-save");
                const cancelBtn = this.querySelector(".btn-inline-cancel");

                let isConfirming = false;

                const resetConfirm = () => {
                    if (isConfirming) {
                        isConfirming = false;
                        if (saveBtn) {
                            saveBtn.className = "btn btn-sm btn-success btn-inline-save";
                            saveBtn.innerHTML = '<i class="fas fa-check"></i>';
                            saveBtn.title = "Save (Enter)";
                        }
                    }
                };

                const triggerSave = () => {
                    if (!isConfirming) {
                        isConfirming = true;
                        if (saveBtn) {
                            saveBtn.className = "btn btn-sm btn-warning btn-inline-save";
                            saveBtn.innerHTML = '<i class="fas fa-exclamation-triangle me-1"></i>Are you sure?';
                            saveBtn.title = "Click again to confirm (Enter)";
                        }
                        return;
                    }
                    doSave(this, field, structureId, inputEl ? inputEl.value : "");
                };

                if (inputEl) {
                    inputEl.focus();
                    if (inputEl.select && inputEl.tagName === "INPUT") inputEl.select();

                    inputEl.addEventListener("input", resetConfirm);
                    inputEl.addEventListener("change", resetConfirm);

                    inputEl.addEventListener("keydown", (evt) => {
                        if (evt.key === "Enter") {
                            evt.preventDefault();
                            triggerSave();
                        } else if (evt.key === "Escape") {
                            evt.preventDefault();
                            cancelActiveEdit();
                        }
                    });
                }

                if (saveBtn) {
                    saveBtn.addEventListener("click", (evt) => {
                        evt.stopPropagation();
                        triggerSave();
                    });
                }

                if (cancelBtn) {
                    cancelBtn.addEventListener("click", (evt) => {
                        evt.stopPropagation();
                        cancelActiveEdit();
                    });
                }
            });
        });
    }

    function doSave(cell, field, structureId, newValue) {
        const row = cell.closest("tr.structure-row");
        const csrfToken = getCsrfToken();

        cell.innerHTML = `<span class="text-info small"><i class="fas fa-spinner fa-spin me-1"></i>Saving...</span>`;

        fetch(`/hostile/structures/${structureId}/inline-update/`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "X-CSRFToken": csrfToken
            },
            body: JSON.stringify({
                field: field,
                value: newValue
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                cell.classList.remove("is-editing");
                activeEditingCell = null;

                if (field === "name") {
                    cell.dataset.rawValue = data.name;
                    patchNameContent(cell, data);
                    if (row) {
                        row.dataset.name = data.name.toLowerCase();
                        updateRowSearchText(row);
                    }
                } else if (field === "owner") {
                    cell.dataset.rawValue = data.owner_ticker || data.alliance_name || data.corporation_name || data.owner_name;
                    cell.innerHTML = `<div class="cell-display-content">${renderOwnerContent(data)}</div>`;
                    cell.title = data.owner_name || "";
                    if (row) {
                        row.dataset.owner = `${data.owner_name || ''} ${data.owner_ticker || ''}`.toLowerCase();
                        row.dataset.groupKey = registryGroupKey(data);
                        row.dataset.groupName = data.owner_name || "Unknown";
                        row.dataset.groupTicker = data.owner_ticker || "";
                        row.dataset.groupUrl = data.alliance_id ? `/hostile/alliances/${data.alliance_id}/`
                            : data.corporation_id ? `/hostile/corporations/${data.corporation_id}/` : "";
                        updateRowSearchText(row);
                        rebuildOwnership();
                        regroupAfterEdit(row);
                    }
                } else if (field === "vulnerability") {
                    cell.dataset.rawValue = data.vulnerability_window || (data.vulnerability_hour !== null ? String(data.vulnerability_hour) : '');
                    cell.innerHTML = `<div class="cell-display-content">${renderVulnBadge(data.vulnerability_display)}</div>`;
                    if (row) {
                        row.dataset.vulnHour = data.vulnerability_hour !== null ? String(data.vulnerability_hour) : "-1";
                        row.dataset.vuln = (data.vulnerability_window || "").toLowerCase();
                        updateRowSearchText(row);
                    }
                } else if (field === "state") {
                    cell.dataset.rawValue = data.state;
                    cell.innerHTML = `<div class="cell-display-content">${renderStateBadge(data.state, data.state_display)}</div>`;
                    if (row) {
                        row.dataset.state = data.state;
                        row.classList.toggle("is-destroyed", data.state === "DESTROYED");
                        updateRowSearchText(row);
                        if (data.state === "ANCHORING") {
                            const coreCell = row.querySelector('[data-field="core_status"]');
                            if (coreCell) {
                                coreCell.dataset.rawValue = "UNFITTED";
                                coreCell.innerHTML = `<div class="cell-display-content">${renderCoreBadge("UNFITTED")}</div>`;
                                row.dataset.core = "UNFITTED";
                            }
                        }
                        regroupAfterEdit(row);
                    }
                } else if (field === "core_status") {
                    cell.dataset.rawValue = data.core_status;
                    cell.innerHTML = `<div class="cell-display-content">${renderCoreBadge(data.core_status)}</div>`;
                    if (row) {
                        row.dataset.core = data.core_status;
                        updateRowSearchText(row);
                    }
                }

                cell.classList.add("editable-cell-flash");
                setTimeout(() => cell.classList.remove("editable-cell-flash"), 1200);

                if (row && data.updated_at_display) {
                    const updatedCell = row.querySelector(".structure-updated-cell");
                    if (updatedCell) {
                        updatedCell.textContent = data.updated_at_display.replace(/\s+ago$/, "");
                    }
                }
            } else {
                alert(data.error || "Failed to update structure.");
                cancelActiveEdit();
            }
        })
        .catch(err => {
            alert("A network error occurred while updating.");
            cancelActiveEdit();
        });
    }

    document.querySelectorAll('.moon-correlation-select').forEach(select => {
        select.addEventListener('change', function() {
            if (!this.value) return;
            fetch(`/hostile/structures/${this.dataset.structureId}/inline-update/`, {
                method: 'POST',
                headers: {'Content-Type': 'application/json', 'X-CSRFToken': getCsrfToken()},
                body: JSON.stringify({field: 'moonmining_moon', value: this.value})
            }).then(response => response.json()).then(data => {
                if (data.success) window.location.reload();
                else alert(data.error || 'Failed to correlate moon scan.');
            }).catch(() => alert('A network error occurred while correlating the moon scan.'));
        });
    });

    initEditableCells();
    rebuildOwnership();
    render();

    // AJAX handling for Suspected Duplicate Cluster Merging
    document.querySelectorAll('.merge-cluster-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (!confirm('{% translate "Merge these candidate structures into the primary structure?" %}')) {
                return;
            }
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalBtnHtml = submitBtn ? submitBtn.innerHTML : '';
            if (submitBtn) {
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>{% translate "Merging..." %}';
            }

            const formData = new FormData(form);

            fetch(form.action, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': getCsrfToken()
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    const clusterCard = form.closest('.suspected-cluster-card');
                    if (clusterCard) {
                        clusterCard.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                        clusterCard.style.opacity = '0';
                        clusterCard.style.transform = 'translateY(-10px)';
                        setTimeout(() => {
                            clusterCard.remove();
                            const container = document.getElementById('suspectedClusterContainer');
                            const remaining = container ? container.querySelectorAll('.suspected-cluster-card').length : 0;
                            const badge = document.getElementById('suspectedCountBadge');
                            if (badge) {
                                if (remaining > 0) {
                                    badge.textContent = remaining;
                                    badge.classList.remove('d-none');
                                } else {
                                    badge.classList.add('d-none');
                                }
                            }
                            if (remaining === 0) {
                                const contentWrapper = document.getElementById('suspectedDuplicatesContent');
                                const emptyState = document.getElementById('suspectedEmptyState');
                                if (contentWrapper) {
                                    contentWrapper.classList.add('d-none');
                                }
                                if (emptyState) {
                                    emptyState.classList.remove('d-none');
                                }
                            }
                        }, 300);
                    }

                    // Remove merged duplicate rows from the main table
                    if (data.merged_ids && data.merged_ids.length > 0) {
                        data.merged_ids.forEach(did => {
                            const dRow = document.querySelector(`tr.structure-row[data-id="${did}"]`);
                            if (dRow) {
                                dRow.remove();
                            }
                        });
                        rebuildOwnership();
                        render();
                    }
                } else {
                    alert(data.error || 'Failed to merge cluster.');
                    if (submitBtn) {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = originalBtnHtml;
                    }
                }
            })
            .catch(err => {
                alert('A network error occurred while merging clusters.');
                if (submitBtn) {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalBtnHtml;
                }
            });
        });
    });

    {% if open_suspected_modal %}
    const suspectedModalEl = document.getElementById('suspectedDuplicatesModal');
    if (suspectedModalEl) {
        const modal = new bootstrap.Modal(suspectedModalEl);
        modal.show();
    }
    {% endif %}
});
</script>
{% endblock %}