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

{% block details %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="mb-0 fw-bold"><i class="fas fa-monument text-info me-2"></i>{% translate "Hostile Structures Registry" %}</h4>
        <p class="text-muted small mb-0">{% 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, Filter & Quick Triage Controls -->
<div class="card bg-dark text-white border-secondary hostile-card mb-3 shadow-sm">
    <div class="card-body p-3">
        <div class="row g-2 align-items-center">
            <div class="col-12 col-md-4">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-dark text-muted border-secondary"><i class="fas fa-search"></i></span>
                    <input type="text" id="structureSearchInput" class="form-control form-control-sm bg-dark text-white border-secondary" placeholder="{% translate 'Search by name, system, owner, type, state...' %}" 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>
            <div class="col-6 col-md-2">
                <select id="structureStateFilter" class="form-select form-select-sm bg-dark text-white border-secondary">
                    <option value="">{% translate "All States" %}</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>
            </div>
            <div class="col-6 col-md-2">
                <select id="structureCoreFilter" class="form-select form-select-sm bg-dark text-white border-secondary">
                    <option value="">{% translate "All Quantum Cores" %}</option>
                    <option value="FITTED">{% translate "Fitted (Installed)" %}</option>
                    <option value="UNFITTED">{% translate "No Core (Unfitted)" %}</option>
                    <option value="UNKNOWN">{% translate "Unknown" %}</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <select id="structureVerifiedFilter" class="form-select form-select-sm bg-dark text-white border-secondary">
                    <option value="">{% translate "All Verification" %}</option>
                    <option value="1">{% translate "Verified Only" %}</option>
                    <option value="0">{% translate "Unverified Only" %}</option>
                </select>
            </div>
            <div class="col-6 col-md-2 d-flex justify-content-between align-items-center">
                <span class="badge bg-secondary small" id="structureCountBadge" title="{% translate 'Filtered / Total structures' %}">
                    <span id="structureVisibleCount">{{ structures|length }}</span> / {{ structures|length }}
                </span>
                <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>
            </div>
        </div>
    </div>
</div>

<div class="card bg-dark text-white border-secondary hostile-card shadow-sm">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0 align-middle" id="structuresTable">
                <thead>
                    <tr class="text-muted small text-uppercase">
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="name" title="{% translate 'Click to sort by Name' %}">
                            {% translate "Name" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="type" title="{% translate 'Click to sort by Type' %}">
                            {% translate "Type" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="system" title="{% translate 'Click to sort by Solar System' %}">
                            {% translate "Solar System" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="owner" title="{% translate 'Click to sort by Owner' %}">
                            {% translate "Owner" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="vulnerability" title="{% translate 'Click to sort by Vulnerability' %}">
                            {% translate "Vulnerability" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="core" title="{% translate 'Click to sort by Quantum Core' %}">
                            {% translate "Quantum Core" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="state" title="{% translate 'Click to sort by State' %}">
                            {% translate "State" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="verified" title="{% translate 'Click to sort by Verification' %}">
                            {% translate "Verified" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="sortable-th cursor-pointer user-select-none" data-sort="updated" title="{% translate 'Click to sort by Last Updated' %}">
                            {% translate "Last Updated" %} <i class="fas fa-sort sort-icon text-muted ms-1"></i>
                        </th>
                        <th class="text-start">{% translate "Actions" %}</th>
                    </tr>
                </thead>
                <tbody id="structuresTableBody" class="border-secondary">
                    {% for struct in structures %}
                    <tr class="structure-row"
                        data-id="{{ struct.id }}"
                        data-name="{{ struct.name|lower }}"
                        data-type="{{ struct.structure_type.name|default:'structure'|lower }}"
                        data-system="{{ struct.solar_system.name|default:'unknown'|lower }}"
                        data-owner="{{ struct.owner_name|lower }} {{ struct.owner_ticker|default:''|lower }}"
                        data-vuln-hour="{{ struct.vulnerability_hour|default:-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-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.owner_name }} {{ struct.owner_ticker|default:'' }} {{ struct.vulnerability_window|default:'' }} {{ struct.state }} {{ struct.core_status }} {{ struct.updated_at|naturaltime }} {% if struct.is_verified %}verified{% else %}unverified{% endif %}">
                        <td class="fw-bold {% 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">
                                <span class="structure-name-text">{{ struct.name }}</span>
                                {% if struct.location_details %}
                                    <div class="small text-muted location-details-text">{{ struct.location_details }}</div>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            {% if struct.structure_type %}
                                <img src="https://images.evetech.net/types/{{ struct.structure_type.id }}/icon?size=32" alt="" class="me-1 rounded" style="width: 24px; height: 24px;">
                                {{ struct.structure_type.name }}
                            {% else %}
                                <span class="text-muted">Structure</span>
                            {% endif %}
                        </td>
                        <td class="text-info fw-bold font-mono">{{ struct.solar_system.name|default:"Unknown" }}</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="{% if perms.hostile.manage_intel or struct.created_by == request.user %}{% translate 'Click to edit owner / ticker' %}{% endif %}">
                            <div class="cell-display-content">
                                {% if struct.alliance %}
                                    <a href="{% url 'hostile:alliance_detail' struct.alliance.id %}" class="text-light fw-bold text-decoration-none hover-primary owner-link">{{ struct.alliance.alliance_name }}</a>
                                {% elif struct.corporation %}
                                    <a href="{% url 'hostile:corporation_detail' struct.corporation.id %}" class="text-light fw-bold text-decoration-none hover-primary owner-link">{{ struct.corporation.corporation_name }}</a>
                                {% else %}
                                    <div class="owner-name-text">{{ struct.owner_name }}</div>
                                {% endif %}
                                {% if struct.owner_ticker %}
                                    <span class="badge badge-subtle-secondary small owner-ticker-badge">[{{ struct.owner_ticker }}]</span>
                                {% endif %}
                            </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="badge badge-subtle-warning"><i class="fas fa-shield-alt me-1"></i>{{ struct.vulnerability_window }}</span>
                                {% elif struct.vulnerability_hour is not None %}
                                    <span class="badge badge-subtle-warning"><i class="fas fa-shield-alt me-1"></i>{{ struct.vulnerability_hour }}:00 UTC</span>
                                {% else %}
                                    <span class="text-muted small">{% translate "Unknown" %}</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="badge badge-subtle-teal"><i class="fas fa-check-circle me-1"></i>Fitted</span>
                                {% elif struct.core_status == "UNFITTED" %}
                                    <span class="badge badge-subtle-danger"><i class="fas fa-times-circle me-1"></i>No Core</span>
                                {% else %}
                                    <span class="badge badge-subtle-secondary">Unknown</span>
                                {% endif %}
                            </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">
                                {% if struct.state == "ONLINE" %}
                                    <span class="badge badge-subtle-success"><i class="fas fa-check-circle me-1"></i>Online</span>
                                {% elif struct.state == "LOW_POWER" %}
                                    <span class="badge badge-subtle-warning"><i class="fas fa-bolt me-1"></i>Low Power</span>
                                {% elif struct.state == "OFFLINE" %}
                                    <span class="badge badge-subtle-secondary"><i class="fas fa-power-off me-1"></i>Offline</span>
                                {% elif struct.state == "ABANDONED" %}
                                    <span class="badge badge-subtle-danger"><i class="fas fa-exclamation-triangle me-1"></i>Abandoned</span>
                                {% elif struct.state == "ANCHORING" %}
                                    <span class="badge badge-subtle-warning"><i class="fas fa-anchor me-1"></i>Anchoring</span>
                                {% elif struct.state == "UNANCHORING" %}
                                    <span class="badge badge-subtle-secondary"><i class="fas fa-box-open me-1"></i>Unanchoring</span>
                                {% elif struct.state == "ARMOR" or struct.state == "HULL" or struct.state == "REINFORCED" %}
                                    <span class="badge badge-subtle-danger"><i class="fas fa-stopwatch me-1"></i>{{ struct.get_state_display }}</span>
                                {% elif struct.state == "DESTROYED" %}
                                    <span class="badge bg-danger text-light"><i class="fas fa-skull me-1"></i>Destroyed</span>
                                {% else %}
                                    <span class="badge badge-subtle-secondary">{{ struct.state }}</span>
                                {% endif %}
                            </div>
                        </td>
                        <td>
                            {% if struct.is_verified %}
                                <span class="badge badge-subtle-teal"><i class="fas fa-check"></i> Verified</span>
                            {% else %}
                                <span class="badge badge-subtle-warning"><i class="fas fa-clock"></i> Unverified</span>
                            {% endif %}
                        </td>
                        <td class="small text-muted structure-updated-cell">{{ struct.updated_at|naturaltime }}</td>
                        <td class="text-start text-nowrap">
                            <div class="dropdown d-inline-block me-1">
                                <button class="btn btn-outline-secondary btn-xs py-0 px-2 dropdown-toggle" 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 me-1"></i>State
                                </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="btn btn-outline-warning btn-xs py-0 px-2 me-1" 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 me-1"></i>{% translate "Calc" %}
                            </a>
                            <button type="button" class="btn btn-outline-info btn-xs py-0 px-2 me-1" onclick="loadFittingModal({{ struct.id }})">
                                <i class="fas fa-crosshairs me-1"></i>{% translate "Fit" %}
                            </button>
                            {% if perms.hostile.manage_intel or struct.created_by == request.user %}
                            <a href="{% url 'hostile:structure_edit' struct.id %}" class="btn btn-outline-primary btn-xs py-0 px-2 me-1" title="{% translate 'Edit Structure' %}">
                                <i class="fas fa-edit me-1"></i>{% translate "Edit" %}
                            </a>
                            {% endif %}
                            {% if perms.hostile.manage_intel %}
                            <button type="button" class="btn btn-outline-danger btn-xs py-0 px-2 me-1" data-bs-toggle="modal" data-bs-target="#deleteStructureModal{{ struct.id }}" title="{% translate 'Delete Structure' %}">
                                <i class="fas fa-trash-alt"></i>
                            </button>
                            {% endif %}
                            {% if perms.hostile.manage_intel and not struct.is_verified %}
                                <a href="{% url 'hostile:structure_verify' struct.id %}" class="btn btn-outline-success btn-xs py-0 px-2">
                                    <i class="fas fa-check"></i>
                                </a>
                            {% endif %}
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="10" class="text-center py-5 text-muted">
                            <i class="fas fa-monument fa-3x mb-3 text-secondary"></i>
                            <p>{% translate "No structures recorded yet. Add structures manually or use the universal Smart Ingest button." %}</p>
                        </td>
                    </tr>
                    {% endfor %}
                    <tr id="noStructureMatchRow" class="d-none">
                        <td colspan="10" class="text-center py-4 text-muted">
                            <i class="fas fa-search fa-2x mb-2 text-secondary d-block"></i>
                            <span>{% translate "No structures match the current search & filter criteria." %}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</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.' %}";
        }
    }

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

    // Auto-fill ticker on corporation selection if not set by alliance
    if (corpSelect) {
        corpSelect.addEventListener("change", function() {
            const selectedText = corpSelect.options[corpSelect.selectedIndex]?.text || '';
            const match = selectedText.match(/\[(.*?)\]/);
            if (match && match[1] && (!tickerInput.value || !allianceSelect.value)) {
                tickerInput.value = match[1];
            } else if (corpSelect.value && (!tickerInput.value || !allianceSelect.value)) {
                fetch(`/hostile/api/corporation-resolve/?query=${encodeURIComponent(corpSelect.value)}`)
                    .then(r => r.json())
                    .then(data => {
                        if (data.success && data.corporation && data.corporation.ticker) {
                            tickerInput.value = data.corporation.ticker;
                        }
                    }).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. Client-Side Search & Multi-Facet Filter
    // ==========================================
    const searchInput = document.getElementById("structureSearchInput");
    const clearSearchBtn = document.getElementById("clearStructureSearchBtn");
    const stateFilter = document.getElementById("structureStateFilter");
    const coreFilter = document.getElementById("structureCoreFilter");
    const verifiedFilter = document.getElementById("structureVerifiedFilter");
    const resetFiltersBtn = document.getElementById("resetStructureFiltersBtn");
    const visibleCountEl = document.getElementById("structureVisibleCount");
    const noMatchRow = document.getElementById("noStructureMatchRow");

    function filterStructures() {
        const query = (searchInput ? searchInput.value : "").toLowerCase().trim();
        const selectedState = stateFilter ? stateFilter.value.toUpperCase().trim() : "";
        const selectedCore = coreFilter ? coreFilter.value.toUpperCase().trim() : "";
        const selectedVerified = verifiedFilter ? verifiedFilter.value.trim() : "";

        if (clearSearchBtn) {
            clearSearchBtn.classList.toggle("d-none", query.length === 0);
        }

        const terms = query ? query.split(/\s+/).filter(t => t.length > 0) : [];
        let visibleCount = 0;
        const rows = document.querySelectorAll("tr.structure-row");

        rows.forEach(row => {
            const rowText = (row.dataset.searchText || "").toLowerCase();
            const rowState = (row.dataset.state || "").toUpperCase();
            const rowCore = (row.dataset.core || "").toUpperCase();
            const rowVerified = row.dataset.verified || "";

            let matchesSearch = true;
            if (terms.length > 0) {
                matchesSearch = terms.every(term => rowText.includes(term));
            }

            let matchesState = true;
            if (selectedState) {
                matchesState = (rowState === selectedState);
            }

            let matchesCore = true;
            if (selectedCore) {
                matchesCore = (rowCore === selectedCore);
            }

            let matchesVerified = true;
            if (selectedVerified) {
                matchesVerified = (rowVerified === selectedVerified);
            }

            if (matchesSearch && matchesState && matchesCore && matchesVerified) {
                row.classList.remove("d-none");
                visibleCount++;
            } else {
                row.classList.add("d-none");
            }
        });

        if (visibleCountEl) {
            visibleCountEl.textContent = visibleCount;
        }

        if (noMatchRow) {
            noMatchRow.classList.toggle("d-none", visibleCount > 0 || rows.length === 0);
        }
    }

    if (searchInput) {
        searchInput.addEventListener("input", filterStructures);
    }
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener("click", function() {
            if (searchInput) {
                searchInput.value = "";
                searchInput.focus();
            }
            filterStructures();
        });
    }
    if (stateFilter) stateFilter.addEventListener("change", filterStructures);
    if (coreFilter) coreFilter.addEventListener("change", filterStructures);
    if (verifiedFilter) verifiedFilter.addEventListener("change", filterStructures);
    if (resetFiltersBtn) {
        resetFiltersBtn.addEventListener("click", function() {
            if (searchInput) searchInput.value = "";
            if (stateFilter) stateFilter.value = "";
            if (coreFilter) coreFilter.value = "";
            if (verifiedFilter) verifiedFilter.value = "";
            filterStructures();
        });
    }

    // ==========================================
    // 2. Table Column Sorting
    // ==========================================
    let currentSortColumn = null;
    let currentSortDir = "asc";

    const sortHeaders = document.querySelectorAll(".sortable-th");
    const tbody = document.getElementById("structuresTableBody");

    sortHeaders.forEach(th => {
        th.addEventListener("click", function() {
            const sortKey = this.dataset.sort;
            if (!sortKey || !tbody) 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 text-muted 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`;
            }

            const rows = Array.from(tbody.querySelectorAll("tr.structure-row"));
            rows.sort((a, b) => {
                let valA, valB;
                switch(sortKey) {
                    case "name":
                        valA = (a.dataset.name || "").toLowerCase();
                        valB = (b.dataset.name || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "type":
                        valA = (a.dataset.type || "").toLowerCase();
                        valB = (b.dataset.type || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "system":
                        valA = (a.dataset.system || "").toLowerCase();
                        valB = (b.dataset.system || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "owner":
                        valA = (a.dataset.owner || "").toLowerCase();
                        valB = (b.dataset.owner || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "vulnerability":
                        valA = parseInt(a.dataset.vulnHour || "-1", 10);
                        valB = parseInt(b.dataset.vulnHour || "-1", 10);
                        if (valA === valB) {
                            valA = (a.dataset.vuln || "").toLowerCase();
                            valB = (b.dataset.vuln || "").toLowerCase();
                            return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                        }
                        return currentSortDir === "asc" ? valA - valB : valB - valA;
                    case "core":
                        valA = (a.dataset.core || "").toLowerCase();
                        valB = (b.dataset.core || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "state":
                        valA = (a.dataset.state || "").toLowerCase();
                        valB = (b.dataset.state || "").toLowerCase();
                        return currentSortDir === "asc" ? valA.localeCompare(valB) : valB.localeCompare(valA);
                    case "verified":
                        valA = parseInt(a.dataset.verified || "0", 10);
                        valB = parseInt(b.dataset.verified || "0", 10);
                        return currentSortDir === "asc" ? valA - valB : valB - valA;
                    case "updated":
                        valA = parseInt(a.dataset.updated || "0", 10);
                        valB = parseInt(b.dataset.updated || "0", 10);
                        return currentSortDir === "asc" ? valA - valB : valB - valA;
                    default:
                        return 0;
                }
            });

            rows.forEach(row => tbody.appendChild(row));
            if (noMatchRow) tbody.appendChild(noMatchRow);
        });
    });

    // ==========================================
    // 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) {
        if (state === "ONLINE") {
            return `<span class="badge badge-subtle-success"><i class="fas fa-check-circle me-1"></i>Online</span>`;
        } else if (state === "LOW_POWER") {
            return `<span class="badge badge-subtle-warning"><i class="fas fa-bolt me-1"></i>Low Power</span>`;
        } else if (state === "OFFLINE") {
            return `<span class="badge badge-subtle-secondary"><i class="fas fa-power-off me-1"></i>Offline</span>`;
        } else if (state === "ABANDONED") {
            return `<span class="badge badge-subtle-danger"><i class="fas fa-exclamation-triangle me-1"></i>Abandoned</span>`;
        } else if (state === "ANCHORING") {
            return `<span class="badge badge-subtle-warning"><i class="fas fa-anchor me-1"></i>Anchoring</span>`;
        } else if (state === "UNANCHORING") {
            return `<span class="badge badge-subtle-secondary"><i class="fas fa-box-open me-1"></i>Unanchoring</span>`;
        } else if (["ARMOR", "HULL", "REINFORCED"].includes(state)) {
            return `<span class="badge badge-subtle-danger"><i class="fas fa-stopwatch me-1"></i>${escapeHtml(stateDisplay || state)}</span>`;
        } else if (state === "DESTROYED") {
            return `<span class="badge bg-danger text-light"><i class="fas fa-skull me-1"></i>Destroyed</span>`;
        } else {
            return `<span class="badge badge-subtle-secondary">${escapeHtml(stateDisplay || state)}</span>`;
        }
    }

    function renderCoreBadge(coreStatus) {
        if (coreStatus === "FITTED") {
            return `<span class="badge badge-subtle-teal"><i class="fas fa-check-circle me-1"></i>Fitted</span>`;
        } else if (coreStatus === "UNFITTED") {
            return `<span class="badge badge-subtle-danger"><i class="fas fa-times-circle me-1"></i>No Core</span>`;
        } else {
            return `<span class="badge badge-subtle-secondary">Unknown</span>`;
        }
    }

    function renderVulnBadge(vulnDisplay) {
        if (vulnDisplay && vulnDisplay !== "Unknown") {
            return `<span class="badge badge-subtle-warning"><i class="fas fa-shield-alt me-1"></i>${escapeHtml(vulnDisplay)}</span>`;
        } else {
            return `<span class="text-muted small">Unknown</span>`;
        }
    }

    function renderOwnerContent(data) {
        let html = '';
        if (data.alliance_name) {
            html += `<a href="/hostile/alliances/${data.alliance_id}/" class="text-light fw-bold text-decoration-none hover-primary owner-link">${escapeHtml(data.alliance_name)}</a>`;
        } else if (data.corporation_name) {
            html += `<a href="/hostile/corporations/${data.corporation_id}/" class="text-light fw-bold text-decoration-none hover-primary owner-link">${escapeHtml(data.corporation_name)}</a>`;
        } else {
            html += `<div class="owner-name-text">${escapeHtml(data.owner_name || 'Unknown')}</div>`;
        }
        if (data.owner_ticker) {
            html += ` <span class="badge badge-subtle-secondary small owner-ticker-badge">[${escapeHtml(data.owner_ticker)}]</span>`;
        }
        return html;
    }

    function renderNameContent(data) {
        let html = `<span class="structure-name-text">${escapeHtml(data.name)}</span>`;
        if (data.location_details) {
            html += `<div class="small text-muted location-details-text">${escapeHtml(data.location_details)}</div>`;
        }
        return html;
    }

    function updateRowSearchText(row) {
        if (!row) return;
        const name = row.dataset.name || "";
        const type = row.dataset.type || "";
        const system = row.dataset.system || "";
        const owner = row.dataset.owner || "";
        const vuln = row.dataset.vuln || "";
        const state = row.dataset.state || "";
        const core = row.dataset.core || "";
        row.dataset.searchText = `${name} ${type} ${system} ${owner} ${vuln} ${state} ${core}`;
    }

    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;
                    cell.innerHTML = `<div class="cell-display-content">${renderNameContent(data)}</div>`;
                    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>`;
                    if (row) {
                        row.dataset.owner = `${data.owner_name || ''} ${data.owner_ticker || ''}`.toLowerCase();
                        updateRowSearchText(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;
                        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";
                            }
                        }
                    }
                } 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;
                    }
                }
            } else {
                alert(data.error || "Failed to update structure.");
                cancelActiveEdit();
            }
        })
        .catch(err => {
            alert("A network error occurred while updating.");
            cancelActiveEdit();
        });
    }

    initEditableCells();

    // 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();
                            }
                        });
                        const remainingRows = document.querySelectorAll('tr.structure-row').length;
                        const totalBadge = document.getElementById('structureCountBadge');
                        const visibleBadge = document.getElementById('structureVisibleCount');
                        if (visibleBadge) visibleBadge.textContent = remainingRows;
                        if (totalBadge) totalBadge.innerHTML = `<span id="structureVisibleCount">${remainingRows}</span> / ${remainingRows}`;
                    }
                } 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 %}