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

{% block details %}
<!-- Header Bar -->
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
    <div>
        <h4 class="mb-1 fw-bold d-flex align-items-center">
            <i class="fas fa-crosshairs text-warning me-2"></i>{% translate "Solar System Intel & Tactical Sitreps" %}
            <span class="badge bg-warning text-dark ms-2 fs-6 font-mono" id="sitrepTotalCounter">{{ observations|length }}</span>
        </h4>
        <p class="text-muted small mb-0">{% translate "Crowd-sourced observations, gate camp warnings, warp bubble locations, and hostile fleet sightings." %}</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-outline-warning btn-sm fw-bold shadow-sm px-3" data-bs-toggle="modal" data-bs-target="#addObservationModal">
            <i class="fas fa-plus me-1"></i>{% translate "Submit Sitrep" %}
        </button>
    </div>
</div>

<!-- Search & Threat Filter Bar -->
<div class="card bg-dark text-white border-secondary hostile-card shadow-sm mb-4">
    <div class="card-body p-3">
        <div class="row g-2 align-items-center">
            <div class="col-md-5">
                <div class="input-group input-group-sm">
                    <span class="input-group-text bg-black border-secondary text-muted"><i class="fas fa-search"></i></span>
                    <input type="text" id="sitrepSearchInput" class="form-control bg-black text-light border-secondary" placeholder="{% translate 'Filter by system, tags, text, or scout (e.g. 1DQ1-A, Smartbombs)...' %}" autocomplete="off">
                    <button class="btn btn-outline-secondary d-none" type="button" id="clearSitrepSearchBtn"><i class="fas fa-times"></i></button>
                </div>
            </div>
            <div class="col-md-7">
                <div class="d-flex flex-wrap gap-1 justify-content-md-end" id="threatFilterGroup">
                    <button type="button" class="btn btn-xs btn-primary fw-bold px-2 sitrep-filter-btn active" data-filter="all">{% translate "All Sitreps" %}</button>
                    <button type="button" class="btn btn-xs btn-outline-danger px-2 sitrep-filter-btn" data-filter="EXTREME">{% translate "Extreme" %}</button>
                    <button type="button" class="btn btn-xs btn-outline-danger px-2 sitrep-filter-btn" data-filter="HIGH">{% translate "High" %}</button>
                    <button type="button" class="btn btn-xs btn-outline-warning px-2 sitrep-filter-btn" data-filter="MEDIUM">{% translate "Medium" %}</button>
                    <button type="button" class="btn btn-xs btn-outline-secondary px-2 sitrep-filter-btn" data-filter="LOW">{% translate "Low" %}</button>
                    <button type="button" class="btn btn-xs btn-outline-warning px-2 sitrep-filter-btn" data-filter="pinned"><i class="fas fa-thumbtack me-1"></i>{% translate "Pinned" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sitrep Cards Grid -->
<div class="row g-4" id="sitrepCardsGrid">
    {% for obs in observations %}
    <div class="col-md-6 col-lg-4 sitrep-card-item" 
         data-threat="{{ obs.threat_level }}" 
         data-pinned="{% if obs.is_pinned %}true{% else %}false{% endif %}"
         data-search-text="{{ obs.solar_system.name|lower }} {{ obs.threat_level|lower }} {{ obs.observation_text|lower }} {{ obs.created_by.username|default:''|lower }} {% for tag in obs.tags.all %}{{ tag.name|lower }} {% endfor %} {% if obs.local_scan %}{{ obs.local_scan.threat_level|lower }} scan pilots {% for p in obs.local_scan.pilots_data %}{{ p.character_name|lower }} {{ p.corporation_name|lower }} {{ p.alliance_name|lower }} {% endfor %}{% endif %} {% if obs.dscan_summary %}{% for s, c in obs.dscan_summary.ship_counts.items %}{{ s|lower }} {% endfor %}{% endif %}">
        <div class="card bg-dark text-white border-secondary hostile-card h-100 shadow-sm {% if obs.is_pinned %}border-warning border-2{% endif %}">
            <div class="card-header hostile-card-header d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2">
                    <span class="fw-bold fs-5 text-warning">{{ obs.solar_system.name }}</span>
                    {% if obs.is_pinned %}
                        <span class="badge badge-subtle-warning"><i class="fas fa-thumbtack"></i> Pinned</span>
                    {% endif %}
                </div>
                <div class="d-flex align-items-center gap-1">
                    {% if obs.is_fresh %}
                        <span class="badge bg-danger pulse-glow-danger font-mono me-1" title="Observed under 1 hour ago">FRESH</span>
                    {% elif obs.is_active_recent %}
                        <span class="badge bg-warning text-dark font-mono me-1" title="Observed under 4 hours ago">ACTIVE</span>
                    {% endif %}
                    {% if obs.threat_level == "EXTREME" %}
                        <span class="badge badge-subtle-danger">EXTREME THREAT</span>
                    {% elif obs.threat_level == "HIGH" %}
                        <span class="badge badge-subtle-danger">HIGH THREAT</span>
                    {% elif obs.threat_level == "MEDIUM" %}
                        <span class="badge badge-subtle-warning">MEDIUM</span>
                    {% else %}
                        <span class="badge badge-subtle-secondary">LOW</span>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                <p class="card-text text-light small mb-3">{{ obs.observation_text|linebreaksbr }}</p>
                
                {% if obs.tags.all %}
                <div class="mb-3 d-flex flex-wrap gap-1">
                    {% for tag in obs.tags.all %}
                        <span class="badge bg-{{ tag.color_class|default:'secondary' }} me-1"><i class="fas fa-tag me-1 small"></i>{{ tag.name }}</span>
                    {% endfor %}
                </div>
                {% endif %}

                {% if obs.local_scan %}
                <div class="p-2 rounded bg-black border border-secondary mb-2 small">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <a href="{% url 'hostile:threat_scan_detail' obs.local_scan.id %}" class="fw-bold text-decoration-none {% if obs.local_scan.threat_level == 'CRITICAL' or obs.local_scan.threat_level == 'HIGH' %}text-danger{% else %}text-info{% endif %}">
                            <i class="fas fa-radar me-1"></i>{% translate "Local Threat Scan" %}: {{ obs.local_scan.pilot_count }} {% translate "Pilots" %}
                        </a>
                        <span class="badge {% if obs.local_scan.threat_level == 'CRITICAL' %}badge-subtle-danger{% elif obs.local_scan.threat_level == 'HIGH' %}badge-subtle-danger{% elif obs.local_scan.threat_level == 'MODERATE' %}badge-subtle-warning{% else %}badge-subtle-secondary{% endif %}">
                            {{ obs.local_scan.threat_level }}
                        </span>
                    </div>
                    <div class="d-flex justify-content-between font-mono small text-muted">
                        <span><i class="fas fa-crosshairs text-danger me-1"></i>Blops Drop: <strong class="text-light">{{ obs.local_scan.blops_drop_chance }}%</strong></span>
                        <span><i class="fas fa-space-shuttle text-warning me-1"></i>Cap Drop: <strong class="text-light">{{ obs.local_scan.cap_drop_chance }}%</strong></span>
                    </div>
                </div>
                {% endif %}

                {% if obs.dscan_summary and obs.dscan_summary.ship_counts %}
                <div class="p-2 rounded bg-black border border-secondary mb-2 small">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="text-uppercase text-muted fw-bold small"><i class="fas fa-satellite text-warning me-1"></i>{% translate "D-Scan Composition" %}</span>
                        <span class="badge bg-secondary font-mono">{{ obs.dscan_summary.total_ships }} {% translate "Ships" %}</span>
                    </div>
                    <div class="d-flex flex-wrap gap-1">
                        {% if obs.dscan_summary.has_bubbles %}
                            <span class="badge bg-danger"><i class="fas fa-circle-notch me-1"></i>{% translate "Bubbles Active" %}</span>
                        {% endif %}
                        {% for ship, count in obs.dscan_summary.ship_counts.items|slice:":5" %}
                            <span class="badge bg-dark border border-secondary text-light font-mono">{{ count }}x {{ ship }}</span>
                        {% endfor %}
                        {% if obs.dscan_summary.ship_counts|length > 5 %}
                            <span class="badge bg-dark text-muted font-mono">+{{ obs.dscan_summary.ship_counts|length|add:"-5" }} more</span>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                <div class="p-2 rounded bg-black border border-secondary mb-2 small font-mono">
                    <div class="d-flex justify-content-between text-info">
                        <span><i class="far fa-clock me-1"></i><strong>{% translate "Time Seen:" %}</strong></span>
                        <span>{{ obs.display_time_seen|date:'Y-m-d H:i' }} UTC <span class="text-muted">({{ obs.display_time_seen|naturaltime }})</span></span>
                    </div>
                    {% if obs.active_hours %}
                    <div class="d-flex justify-content-between text-muted mt-1 small">
                        <span><i class="fas fa-globe me-1"></i>{% translate "Timezone Notes:" %}</span>
                        <span>{{ obs.active_hours }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>
            <div class="card-footer hostile-card-header border-secondary d-flex justify-content-between align-items-center small text-muted">
                <div>
                    <span>by <strong>{{ obs.created_by.username|default:"Intel Scout" }}</strong></span>
                    {% if obs.is_verified %}
                        <span class="text-success ms-1"><i class="fas fa-check-circle"></i> Verified</span>
                    {% endif %}
                </div>
                <div class="d-inline-flex gap-1">
                    <button type="button" class="btn btn-outline-info btn-xs py-0 px-2 btn-copy-sitrep-ping" 
                            data-system="{{ obs.solar_system.name }}"
                            data-threat="{{ obs.threat_level }}"
                            data-tags="{% for tag in obs.tags.all %}{{ tag.name }}{% if not forloop.last %}, {% endif %}{% endfor %}"
                            data-text="{{ obs.observation_text|truncatechars:120 }}"
                            data-time="{{ obs.display_time_seen|naturaltime }}"
                            data-scout="{{ obs.created_by.username|default:'Intel Scout' }}"
                            data-scan="{% if obs.local_scan %}{{ obs.local_scan.pilot_count }} pilots (Blops {{ obs.local_scan.blops_drop_chance }}%, Cap {{ obs.local_scan.cap_drop_chance }}%){% endif %}"
                            data-dscan="{% if obs.dscan_summary and obs.dscan_summary.ship_counts %}{{ obs.dscan_summary.total_ships }} ships{% if obs.dscan_summary.has_bubbles %}, Bubbles Active{% endif %}{% endif %}"
                            title="{% translate 'Copy FC Discord / Fleet Broadcast Ping' %}">
                        <i class="fas fa-bullhorn"></i> Ping
                    </button>
                    {% if perms.hostile.manage_intel %}
                        <a href="{% url 'hostile:system_observation_pin' obs.id %}" class="btn btn-outline-warning btn-xs py-0 px-2" title="{% translate 'Pin / Unpin' %}">
                            <i class="fas fa-thumbtack"></i>
                        </a>
                        {% if not obs.is_verified %}
                        <a href="{% url 'hostile:system_observation_verify' obs.id %}" class="btn btn-outline-success btn-xs py-0 px-2" title="{% translate 'Verify' %}">
                            <i class="fas fa-check"></i>
                        </a>
                        {% endif %}
                    {% endif %}
                    {% if perms.hostile.manage_intel or obs.created_by == request.user %}
                    <a href="{% url 'hostile:system_observation_edit' obs.id %}" class="btn btn-outline-primary btn-xs py-0 px-2" title="{% translate 'Edit Observation' %}">
                        <i class="fas fa-edit"></i>
                    </a>
                    {% endif %}
                    {% if perms.hostile.manage_intel %}
                    <a href="{% url 'hostile:system_observation_delete' obs.id %}" class="btn btn-outline-danger btn-xs py-0 px-2" title="{% translate 'Delete Observation' %}">
                        <i class="fas fa-trash-alt"></i>
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12 text-center py-5 text-muted" id="emptySitrepsPlaceholder">
        <i class="fas fa-crosshairs fa-3x mb-3 text-secondary"></i>
        <p>{% translate "No system sitreps or gate camp warnings recorded." %}</p>
    </div>
    {% endfor %}
</div>

<div class="text-center py-5 text-muted d-none" id="noFilterMatchMessage">
    <i class="fas fa-filter fa-3x mb-3 text-secondary"></i>
    <p>{% translate "No sitreps match your current search and filter criteria." %}</p>
</div>

<!-- Add Observation Modal -->
<div class="modal fade" id="addObservationModal" 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:system_observation_add' %}" method="post" id="addSitrepForm">
                {% csrf_token %}
                <div class="modal-header border-secondary">
                    <h5 class="modal-title d-flex align-items-center">
                        <i class="fas fa-bullhorn text-warning me-2"></i>{% translate "Submit System Tactical Sitrep" %}
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Quick Sitrep Templates -->
                    <div class="mb-3 p-2 rounded bg-black border border-secondary">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <span class="text-uppercase text-muted small fw-bold"><i class="fas fa-bolt text-warning me-1"></i>{% translate "Quick Sitrep Templates" %}</span>
                            <span class="text-muted small">{% translate "One-click auto-fill" %}</span>
                        </div>
                        <div class="d-flex flex-wrap gap-1">
                            <button type="button" class="btn btn-xs btn-outline-danger py-1 px-2 btn-sitrep-preset" 
                                    data-threat="HIGH" 
                                    data-tags="Gate Camp,Bubbles on Gate" 
                                    data-text="Heavy Gate Camp active with warp disruption bubbles on gate. Interdictors and heavy tackle on grid.">
                                <i class="fas fa-shield-virus me-1"></i>{% translate "Heavy Gate Camp" %}
                            </button>
                            <button type="button" class="btn btn-xs btn-outline-danger py-1 px-2 btn-sitrep-preset" 
                                    data-threat="HIGH" 
                                    data-tags="Smartbombs,Gate Camp" 
                                    data-text="Smartbombing Battleships positioned at gate warp-in. High risk for frigates and shuttles.">
                                <i class="fas fa-bomb me-1"></i>{% translate "Smartbomb Trap" %}
                            </button>
                            <button type="button" class="btn btn-xs btn-outline-danger py-1 px-2 btn-sitrep-preset" 
                                    data-threat="EXTREME" 
                                    data-tags="Cyno In System,Blops Hunter" 
                                    data-text="Covert Cyno Hunter spotted in system. Black Ops drop standby alert.">
                                <i class="fas fa-user-secret me-1"></i>{% translate "Cyno / Blops Hunter" %}
                            </button>
                            <button type="button" class="btn btn-xs btn-outline-danger py-1 px-2 btn-sitrep-preset" 
                                    data-threat="EXTREME" 
                                    data-tags="Capital Fleet,Hostile Staging" 
                                    data-text="Hostile Capital fleet active in system (Dreadnoughts / Carriers / Force Auxiliaries spotted).">
                                <i class="fas fa-space-shuttle me-1"></i>{% translate "Capital Fleet" %}
                            </button>
                            <button type="button" class="btn btn-xs btn-outline-success py-1 px-2 btn-sitrep-preset" 
                                    data-threat="LOW" 
                                    data-tags="Roaming Gang" 
                                    data-text="Camp dispersed. System gate grid is clear.">
                                <i class="fas fa-check-circle me-1"></i>{% translate "System Clear" %}
                            </button>
                        </div>
                    </div>

                    <div class="row g-3">
                        <!-- Solar System -->
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">
                                <i class="fas fa-map-marker-alt text-danger me-1"></i>{% 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="obsSystemSearchInput" class="form-control text-light bg-black border-secondary" placeholder="{% translate 'Search solar system (e.g. Jita, 1DQ1-A)...' %}" list="obsSystemsDatalist" autocomplete="off" required>
                                <button class="btn btn-outline-secondary" type="button" id="clearObsSystemBtn" title="Clear"><i class="fas fa-times"></i></button>
                            </div>
                            <div class="d-none">
                                {{ obs_form.solar_system }}
                            </div>
                            <datalist id="obsSystemsDatalist"></datalist>
                        </div>

                        <!-- Threat Level -->
                        <div class="col-md-6">
                            <label class="form-label text-muted small fw-bold text-uppercase">
                                <i class="fas fa-shield-alt text-warning me-1"></i>{% translate "Threat Level" %}
                            </label>
                            {{ obs_form.threat_level }}
                        </div>

                        <!-- Time Seen with "Now" & Presets -->
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold text-uppercase d-flex justify-content-between align-items-center">
                                <span><i class="fas fa-clock text-info me-1"></i>{% translate "Time Seen (UTC)" %}</span>
                                <span class="text-muted small" style="text-transform: none;">{% translate "Timestamp when hostile activity was spotted" %}</span>
                            </label>
                            <div class="input-group mb-1">
                                <span class="input-group-text bg-black border-secondary text-info"><i class="far fa-clock"></i></span>
                                {{ obs_form.time_seen }}
                                <button class="btn btn-outline-info fw-bold btn-time-preset" type="button" data-offset="0" data-target="id_time_seen">
                                    <i class="fas fa-history me-1"></i>{% translate "Now" %}
                                </button>
                            </div>
                            <div class="d-flex flex-wrap gap-1">
                                <button class="btn btn-xs btn-outline-secondary py-0 px-2 btn-time-preset" type="button" data-offset="15" data-target="id_time_seen">-15m</button>
                                <button class="btn btn-xs btn-outline-secondary py-0 px-2 btn-time-preset" type="button" data-offset="30" data-target="id_time_seen">-30m</button>
                                <button class="btn btn-xs btn-outline-secondary py-0 px-2 btn-time-preset" type="button" data-offset="60" data-target="id_time_seen">-1h</button>
                                <button class="btn btn-xs btn-outline-secondary py-0 px-2 btn-time-preset" type="button" data-offset="120" data-target="id_time_seen">-2h</button>
                                <button class="btn btn-xs btn-outline-secondary py-0 px-2 btn-time-preset" type="button" data-offset="240" data-target="id_time_seen">-4h</button>
                            </div>
                        </div>

                        <!-- Preselectable Tags & Custom Tag Creator -->
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold text-uppercase d-flex justify-content-between align-items-center">
                                <span><i class="fas fa-tags text-primary me-1"></i>{% translate "Threat Classification Tags" %}</span>
                                <span class="text-muted small" style="text-transform: none;">{% translate "Click to toggle or add new" %}</span>
                            </label>
                            <div class="p-2 rounded bg-black border border-secondary mb-2">
                                <div class="d-flex flex-wrap gap-1" id="modalTagPillsContainer">
                                    {% for tag in available_tags %}
                                        <button type="button" 
                                                class="btn btn-xs btn-outline-{{ tag.color_class|default:'secondary' }} sitrep-tag-pill py-1 px-2 mb-1" 
                                                data-tag-id="{{ tag.id }}" 
                                                data-tag-name="{{ tag.name }}">
                                            <i class="fas fa-tag me-1 small"></i>{{ tag.name }}
                                        </button>
                                    {% endfor %}
                                </div>
                                <div class="input-group input-group-sm mt-2">
                                    <span class="input-group-text bg-dark border-secondary text-muted"><i class="fas fa-plus"></i></span>
                                    <input type="text" id="modalCustomTagInput" class="form-control bg-dark text-light border-secondary" placeholder="{% translate 'Add custom tag (e.g. Titan Undocked, T3C Gang)...' %}">
                                    <button class="btn btn-outline-info" type="button" id="modalAddCustomTagBtn">{% translate "Add Tag" %}</button>
                                </div>
                            </div>
                            <div class="d-none">
                                {{ obs_form.tags }}
                                {{ obs_form.new_tag }}
                            </div>
                        </div>

                        <!-- Observation Details -->
                        <div class="col-12">
                            <label class="form-label text-muted small fw-bold text-uppercase">
                                <i class="fas fa-comment-alt text-secondary me-1"></i>{% translate "Observation Details / Sitrep" %}
                            </label>
                            {{ obs_form.observation_text }}
                        </div>

                        <!-- Optional Integrated Local & D-Scan Scanner Ingestion -->
                        <div class="col-12">
                            <div class="card bg-black border-secondary">
                                <div class="card-header bg-dark border-secondary p-2 d-flex justify-content-between align-items-center" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#sitrepScannerCollapse" aria-expanded="false" id="sitrepScannerToggleHeader">
                                    <span class="small fw-bold text-uppercase text-light d-flex align-items-center">
                                        <i class="fas fa-satellite-dish text-info me-2"></i>{% translate "Attach Local Chat / Pilot Roster & D-Scan" %}
                                        <span class="badge bg-secondary ms-2 small">{% translate "Optional" %}</span>
                                    </span>
                                    <span class="text-muted small"><i class="fas fa-chevron-down" id="sitrepScannerChevron"></i></span>
                                </div>
                                <div class="collapse" id="sitrepScannerCollapse">
                                    <div class="card-body p-3">
                                        <p class="text-muted small mb-3">
                                            <i class="fas fa-info-circle text-info me-1"></i>
                                            {% translate "Pasting Local chat and/or D-Scan cross-references pilots, calculates Black Ops / Capital drop chances, auto-updates pilot dossiers, and extracts ship hulls on grid." %}
                                        </p>
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small fw-bold text-uppercase d-flex justify-content-between">
                                                    <span><i class="fas fa-users text-primary me-1"></i>{% translate "Local Chat / Pilot Roster" %}</span>
                                                    <span class="text-muted small">{% translate "Ctrl+A / Ctrl+C from Local" %}</span>
                                                </label>
                                                {{ obs_form.raw_local_text }}
                                                <div class="form-text text-muted small">{% translate "Identifies hostile pilots, cyno alts, and blops droppers." %}</div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label text-muted small fw-bold text-uppercase d-flex justify-content-between">
                                                    <span><i class="fas fa-satellite text-warning me-1"></i>{% translate "Directional Scan (D-Scan)" %}</span>
                                                    <span class="text-muted small">{% translate "Ctrl+A / Ctrl+C from D-Scan" %}</span>
                                                </label>
                                                {{ obs_form.raw_dscan_text }}
                                                <div class="form-text text-muted small">{% translate "Identifies ship hulls, warp bubbles, and deployables on grid." %}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </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-warning fw-bold px-4">
                        <i class="fas fa-paper-plane me-1"></i>{% translate "Submit Sitrep" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{% block extra_javascript %}
{{ block.super }}
<script>
document.addEventListener("DOMContentLoaded", function() {
    // 1. Solar System Autocomplete in Modal
    attachSolarSystemAutocomplete("obsSystemSearchInput", "id_solar_system", "obsSystemsDatalist", "clearObsSystemBtn");

    // 2. Helper to Format UTC Date for datetime-local
    function getUtcDatetimeLocalString(offsetMinutes = 0) {
        const now = new Date(Date.now() - (offsetMinutes * 60 * 1000));
        const year = now.getUTCFullYear();
        const month = String(now.getUTCMonth() + 1).padStart(2, '0');
        const day = String(now.getUTCDate()).padStart(2, '0');
        const hours = String(now.getUTCHours()).padStart(2, '0');
        const minutes = String(now.getUTCMinutes()).padStart(2, '0');
        return `${year}-${month}-${day}T${hours}:${minutes}`;
    }

    // Initialize Time Seen to Now if blank
    const timeSeenInput = document.getElementById("id_time_seen");
    if (timeSeenInput && !timeSeenInput.value) {
        timeSeenInput.value = getUtcDatetimeLocalString(0);
    }

    // Handle Time Preset Buttons
    document.querySelectorAll(".btn-time-preset").forEach(btn => {
        btn.addEventListener("click", function() {
            const offset = parseInt(this.dataset.offset || "0", 10);
            const targetId = this.dataset.target || "id_time_seen";
            const targetInput = document.getElementById(targetId);
            if (targetInput) {
                targetInput.value = getUtcDatetimeLocalString(offset);
            }
        });
    });

    // 3. Interactive Tag Selector Logic
    function setupTagSelector(containerId, selectId, newTagInputId, addBtnId) {
        const container = document.getElementById(containerId);
        const select = document.getElementById(selectId);
        const customInput = document.getElementById(newTagInputId);
        const addBtn = document.getElementById(addBtnId);
        if (!container || !select) return;

        // Sync initial state from select
        function syncPillsFromSelect() {
            const selectedVals = Array.from(select.selectedOptions).map(o => o.value);
            container.querySelectorAll(".sitrep-tag-pill").forEach(pill => {
                const tagId = pill.dataset.tagId;
                if (selectedVals.includes(tagId)) {
                    pill.classList.add("active", "fw-bold", "shadow-sm");
                    pill.style.boxShadow = "0 0 8px rgba(56, 189, 248, 0.4)";
                } else {
                    pill.classList.remove("active", "fw-bold", "shadow-sm");
                    pill.style.boxShadow = "";
                }
            });
        }

        // Toggle Pill Click
        container.addEventListener("click", function(e) {
            const pill = e.target.closest(".sitrep-tag-pill");
            if (!pill) return;
            const tagId = pill.dataset.tagId;
            let opt = Array.from(select.options).find(o => o.value === tagId);
            if (!opt) {
                opt = document.createElement("option");
                opt.value = tagId;
                opt.text = pill.dataset.tagName || pill.textContent.trim();
                select.appendChild(opt);
            }
            opt.selected = !opt.selected;
            select.dispatchEvent(new Event("change"));
            syncPillsFromSelect();
        });

        // Add Custom Tag
        function addCustomTag() {
            if (!customInput) return;
            const val = customInput.value.trim();
            if (!val) return;

            // Check if already in pills
            const existingPill = Array.from(container.querySelectorAll(".sitrep-tag-pill")).find(p => p.dataset.tagName?.toLowerCase() === val.toLowerCase());
            if (existingPill) {
                existingPill.click();
                customInput.value = "";
                return;
            }

            // Create new pill button
            const newPill = document.createElement("button");
            newPill.type = "button";
            newPill.className = "btn btn-xs btn-outline-warning sitrep-tag-pill py-1 px-2 mb-1 active fw-bold";
            newPill.dataset.tagName = val;
            newPill.dataset.tagId = `new_${val}`;
            newPill.innerHTML = `<i class="fas fa-tag me-1 small"></i>${val}`;
            container.appendChild(newPill);

            // Append to hidden select and new_tag field
            const opt = document.createElement("option");
            opt.value = val;
            opt.text = val;
            opt.selected = true;
            select.appendChild(opt);

            const newTagField = document.getElementById("id_new_tag");
            if (newTagField) {
                const current = newTagField.value ? newTagField.value.split(",").map(s => s.trim()) : [];
                if (!current.includes(val)) current.push(val);
                newTagField.value = current.join(", ");
            }

            customInput.value = "";
            syncPillsFromSelect();
        }

        if (addBtn) addBtn.addEventListener("click", addCustomTag);
        if (customInput) {
            customInput.addEventListener("keydown", function(e) {
                if (e.key === "Enter") {
                    e.preventDefault();
                    addCustomTag();
                }
            });
        }

        syncPillsFromSelect();
    }

    setupTagSelector("modalTagPillsContainer", "id_tags", "modalCustomTagInput", "modalAddCustomTagBtn");

    // 4. Quick Sitrep Presets
    document.querySelectorAll(".btn-sitrep-preset").forEach(btn => {
        btn.addEventListener("click", function() {
            const threat = this.dataset.threat;
            const tags = (this.dataset.tags || "").split(",").map(t => t.trim().toLowerCase());
            const text = this.dataset.text;

            const threatSelect = document.getElementById("id_threat_level");
            if (threatSelect && threat) {
                threatSelect.value = threat;
                threatSelect.dispatchEvent(new Event("change"));
                if (threatSelect.syncSearchableSelect) threatSelect.syncSearchableSelect();
            }

            const obsText = document.getElementById("id_observation_text");
            if (obsText && text) {
                obsText.value = text;
            }

            // Auto-expand scanner accordion for high/extreme camp presets
            const scannerCollapse = document.getElementById("sitrepScannerCollapse");
            if (scannerCollapse && (threat === "HIGH" || threat === "EXTREME")) {
                try {
                    const bsCollapse = bootstrap.Collapse.getOrCreateInstance(scannerCollapse, { toggle: false });
                    bsCollapse.show();
                } catch (e) {}
            }

            const container = document.getElementById("modalTagPillsContainer");
            const select = document.getElementById("id_tags");
            if (container && select) {
                // Clear existing selections first
                Array.from(select.options).forEach(o => o.selected = false);
                container.querySelectorAll(".sitrep-tag-pill").forEach(pill => {
                    const pillName = (pill.dataset.tagName || pill.textContent || "").trim().toLowerCase();
                    if (tags.some(t => pillName.includes(t))) {
                        const tagId = pill.dataset.tagId;
                        let opt = Array.from(select.options).find(o => o.value === tagId);
                        if (opt) opt.selected = true;
                    }
                });
                select.dispatchEvent(new Event("change"));
                // Trigger sync
                const selectedVals = Array.from(select.selectedOptions).map(o => o.value);
                container.querySelectorAll(".sitrep-tag-pill").forEach(pill => {
                    pill.classList.toggle("active", selectedVals.includes(pill.dataset.tagId));
                    pill.classList.toggle("fw-bold", selectedVals.includes(pill.dataset.tagId));
                });
            }
        });
    });

    // 5. Client-Side Sitrep Filter & Search
    const searchInput = document.getElementById("sitrepSearchInput");
    const clearSearchBtn = document.getElementById("clearSitrepSearchBtn");
    const filterButtons = document.querySelectorAll(".sitrep-filter-btn");
    const sitrepCards = document.querySelectorAll(".sitrep-card-item");
    const noMatchMsg = document.getElementById("noFilterMatchMessage");
    let activeFilter = "all";

    function filterSitreps() {
        const query = (searchInput ? searchInput.value : "").toLowerCase().trim();
        let visibleCount = 0;

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

        sitrepCards.forEach(card => {
            const cardThreat = (card.dataset.threat || "").toUpperCase();
            const cardPinned = card.dataset.pinned === "true";
            const cardText = (card.dataset.searchText || "").toLowerCase();

            let matchesThreat = false;
            if (activeFilter === "all") {
                matchesThreat = true;
            } else if (activeFilter === "pinned") {
                matchesThreat = cardPinned;
            } else if (activeFilter === cardThreat) {
                matchesThreat = true;
            }

            const matchesQuery = !query || cardText.includes(query);

            if (matchesThreat && matchesQuery) {
                card.classList.remove("d-none");
                visibleCount++;
            } else {
                card.classList.add("d-none");
            }
        });

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

    if (searchInput) {
        searchInput.addEventListener("input", filterSitreps);
    }
    if (clearSearchBtn) {
        clearSearchBtn.addEventListener("click", function() {
            searchInput.value = "";
            filterSitreps();
            searchInput.focus();
        });
    }

    filterButtons.forEach(btn => {
        btn.addEventListener("click", function() {
            filterButtons.forEach(b => {
                b.classList.remove("active", "btn-primary", "btn-danger", "btn-warning", "btn-secondary");
                if (b.dataset.filter === "all") b.classList.add("btn-outline-primary");
                else if (b.dataset.filter === "EXTREME" || b.dataset.filter === "HIGH") b.classList.add("btn-outline-danger");
                else if (b.dataset.filter === "MEDIUM" || b.dataset.filter === "pinned") b.classList.add("btn-outline-warning");
                else b.classList.add("btn-outline-secondary");
            });
            this.classList.add("active");
            if (this.dataset.filter === "all") this.classList.replace("btn-outline-primary", "btn-primary");
            activeFilter = this.dataset.filter;
            filterSitreps();
        });
    });

    // 6. One-Click FC Discord / Fleet Broadcast Ping Generator
    document.querySelectorAll(".btn-copy-sitrep-ping").forEach(btn => {
        btn.addEventListener("click", function() {
            const system = this.dataset.system || "Unknown";
            const threat = this.dataset.threat || "LOW";
            const tags = this.dataset.tags ? ` | Tags: ${this.dataset.tags}` : "";
            const scan = this.dataset.scan ? `\n> 📡 Threat Scan: ${this.dataset.scan}` : "";
            const dscan = this.dataset.dscan ? `\n> 🛰️ Grid Scan: ${this.dataset.dscan}` : "";
            const text = this.dataset.text || "";
            const time = this.dataset.time || "recently";
            const scout = this.dataset.scout || "Scout";

            const pingStr = `⚠️ **[SITREP] ${system}** | **${threat} THREAT**${tags}\n> ${text}${scan}${dscan}\n*Spotted: ${time} by ${scout}*`;

            if (navigator.clipboard) {
                navigator.clipboard.writeText(pingStr).then(() => {
                    const originalHtml = this.innerHTML;
                    this.innerHTML = `<i class="fas fa-check text-success"></i> Copied!`;
                    setTimeout(() => { this.innerHTML = originalHtml; }, 2000);
                });
            } else {
                alert(`Ping copied:\n${pingStr}`);
            }
        });
    });
});
</script>
{% endblock %}
{% endblock %}