{{define "title"}}Target Details - {{.Target.Value}} - XPFarm{{end}}
{{template "layout.html" .}}
{{define "content"}}
<div style="margin-bottom: 20px;">
    <a href="/asset/{{.Target.AssetID}}" style="color: var(--color-muted); text-decoration: none;">&larr; Back to
        Asset</a>
</div>

<div class="card">
    <div style="display: flex; justify-content: space-between; align-items: start;">
        <div>
            <h1 style="margin-bottom: 5px;">{{.Target.Value}}</h1>
            <div style="display: flex; gap: 10px; font-size: 0.9rem; color: var(--color-muted);">
                <span>Type: {{.Target.Type}}</span>
                <span>&bull;</span>
                <span>Status: {{if .Target.IsAlive}}<span
                        style="color: var(--color-secondary);">Alive</span>{{else}}<span
                        style="color: #ef4444;">Unreachable</span>{{end}}</span>
                <span>&bull;</span>
                <span>Cloudflare: {{if .Target.IsCloudflare}}Yes{{else}}No{{end}}</span>
            </div>
        </div>
        <div style="text-align: right;">
            <p style="margin: 0; color: var(--color-muted); font-size: 0.8rem;">Last Scanned</p>
            <p style="margin: 0; font-family: monospace;">{{.Target.UpdatedAt.Format "Jan 02, 15:04"}}</p>
        </div>
    </div>
</div>

<div class="tabs" style="margin-bottom: 20px; border-bottom: 1px solid var(--border-color);">
    <button class="tab-btn active" onclick="showTab(event, 'overview')"><b><i>Overview</i></b></button>
    <button class="tab-btn" onclick="showTab(event, 'subdomains')">Subdomains <span class="badge"
            style="background:var(--bg-hover); color:white;">{{len .Target.Subdomains}}</span></button>
    <button class="tab-btn" onclick="showTab(event, 'network')">Network <span class="badge"
            style="background:var(--bg-hover); color:white;">{{len .Target.Ports}}</span></button>
    <button class="tab-btn" onclick="showTab(event, 'web')">Web <span class="badge"
            style="background:var(--bg-hover); color:white;">{{len .Target.WebAssets}}</span></button>
    <button class="tab-btn" onclick="showTab(event, 'vulns')">Vulnerabilities <span class="badge"
            style="background:var(--bg-hover); color:white;">{{.VulnCount}}</span></button>
    <button class="tab-btn" onclick="showTab(event, 'logs')">Raw Logs</button>
</div>

<!-- Overview Tab -->
<div id="overview" class="tab-content" style="display: block;">
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
        <div class="card">
            <h3>Open Ports</h3>
            <p style="font-size: 2rem; font-weight: bold; color: var(--color-secondary);">{{len .Target.Ports}}</p>
        </div>
        <div class="card">
            <h3>Web Assets</h3>
            <p style="font-size: 2rem; font-weight: bold; color: #3b82f6;">{{len .Target.WebAssets}}</p>
        </div>
        <div class="card">
            <h3>Vulnerabilities</h3>
            <p style="font-size: 2rem; font-weight: bold; color: #ef4444;">{{.VulnCount}}</p>
        </div>
        <div class="card">
            <h3>Subdomains</h3>
            <p style="font-size: 2rem; font-weight: bold; color: #a855f7;">{{len .Target.Subdomains}}</p>
        </div>
    </div>
</div>

<!-- Subdomains Tab -->
<div id="subdomains" class="tab-content">
    <div class="card">
        <table class="table">
            <thead>
                <tr>
                    <th>Subdomain</th>
                    <th>Status</th>
                    <th>Last Seen</th>
                </tr>
            </thead>
            <tbody>
                {{range .Target.Subdomains}}
                <tr>
                    <td><a href="/target/{{.ID}}" style="color: var(--color-primary);">{{.Value}}</a></td>
                    <td>{{if .IsAlive}}Alive{{else}}Unreachable{{end}}</td>
                    <td>{{.UpdatedAt.Format "Jan 02, 15:04"}}</td>
                </tr>
                {{else}}
                <tr>
                    <td colspan="3" class="text-muted">No subdomains found yet.</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<!-- Network/Ports Tab -->
<div id="network" class="tab-content">
    <div class="card">
        <table class="table">
            <thead>
                <tr>
                    <th>Port</th>
                    <th>Protocol</th>
                    <th>Service</th>
                    <th>Product</th>
                    <th>Version</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {{range .Target.Ports}}
                <tr>
                    <td>{{.Port}}</td>
                    <td>{{.Protocol}}</td>
                    <td>{{.Service}}</td>
                    <td>{{.Product}}</td>
                    <td>{{.Version}}</td>
                    <td style="text-align: right;">
                        {{if .Scripts}}
                        <button onclick="toggleRow('row-{{.ID}}')"
                            style="background:none; border:none; cursor:pointer; color: var(--color-primary);">
                            &#9660;
                        </button>
                        {{end}}
                    </td>
                </tr>
                {{if .Scripts}}
                <tr id="row-{{.ID}}" style="display:none; background: rgba(255,255,255,0.03);">
                    <td colspan="6" style="border-bottom: 2px solid var(--border-color);">
                        <div style="padding: 10px;">
                            <strong style="display:block; margin-bottom: 5px; color: var(--color-muted);">Script
                                Output:</strong>
                            <pre
                                style="margin: 0; font-family: monospace; color: #d4d4d4; white-space: pre-wrap; font-size: 0.85rem;">{{.Scripts}}</pre>
                        </div>
                    </td>
                </tr>
                {{end}}
                {{else}}
                <tr>
                    <td colspan="6" class="text-muted">No open ports found yet.</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<!-- Web Assets Tab -->
<div id="web" class="tab-content">
    <div class="card">
        <table class="table">
            <thead>
                <tr>
                    <th>URL</th>
                    <th>Title</th>
                    <th>Tech</th>
                    <th>Status</th>
                    <th>Screenshot</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {{range .Target.WebAssets}}
                <tr>
                    <td><a href="{{.URL}}" target="_blank" style="color: var(--color-primary);">{{.URL}}</a></td>
                    <td>{{.Title}}</td>
                    <td>{{.TechStack}}</td>
                    <td><span class="badge"
                            style="background: {{if eq .StatusCode 200}}var(--color-secondary){{else}}var(--bg-hover){{end}}">{{.StatusCode}}</span>
                    </td>
                    <td>
                        {{if .Screenshot}}
                        <img src="/{{.Screenshot}}" alt="Screenshot"
                            style="width: 50px; height: 35px; object-fit: cover; cursor: pointer; border: 1px solid var(--border-color); border-radius: 4px;"
                            onclick="showImage('/{{.Screenshot}}')">
                        {{if .VisionAnalysis}}
                        <div style="font-size:0.7rem; color:var(--color-muted); margin-top:3px; max-width:160px; white-space:normal;" title="AI Vision Analysis">🤖 {{.VisionAnalysis | truncateString 80}}</div>
                        {{end}}
                        {{else}}
                        -
                        {{end}}
                    </td>
                    <td style="text-align: right;">
                        <button onclick="toggleRow('web-row-{{.ID}}')"
                            style="background:none; border:none; cursor:pointer; color: var(--color-primary);">
                            &#9660;
                        </button>
                    </td>
                </tr>
                <tr id="web-row-{{.ID}}" style="display:none; background: rgba(255,255,255,0.03);">
                    <td colspan="6" style="border-bottom: 2px solid var(--border-color);">
                        <div
                            style="padding: 15px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; font-size: 0.9rem;">
                            {{if .WebServer}}<div><strong style="color: var(--color-muted);">Web Server:</strong>
                                {{.WebServer}}</div>{{end}}
                            {{if .IP}}<div><strong style="color: var(--color-muted);">IP:</strong> {{.IP}}</div>{{end}}
                            {{if .CNAME}}<div><strong style="color: var(--color-muted);">CNAME:</strong> {{.CNAME}}
                            </div>{{end}}
                            {{if .CDN}}<div><strong style="color: var(--color-muted);">CDN:</strong> {{.CDN}}</div>
                            {{end}}
                            {{if .Location}}<div><strong style="color: var(--color-muted);">Redirect To:</strong>
                                {{.Location}}</div>{{end}}
                            {{if .ContentType}}<div><strong style="color: var(--color-muted);">Content Type:</strong>
                                {{.ContentType}}</div>{{end}}
                            <div><strong style="color: var(--color-muted);">Size:</strong> {{.ContentLen}} bytes</div>
                            <div><strong style="color: var(--color-muted);">Words/Lines:</strong> {{.WordCount}} /
                                {{.LineCount}}</div>
                        </div>

                        {{if .KatanaOutput}}
                        <div style="padding: 0 15px 15px 15px;">
                            <div
                                style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;">
                                <strong style="color: var(--color-muted);">Discovered Paths:</strong>
                                <button onclick="copyAllPaths('katana-raw-data-{{.ID}}', this)"
                                    title="Copy all paths to clipboard"
                                    style="background:none; border:1px solid var(--border-color); border-radius:4px; cursor:pointer; padding:3px 10px; color:var(--color-muted); font-size:0.75rem; transition: all 0.2s;">
                                    Copy All
                                </button>
                            </div>
                            <div id="katana-tree-{{.ID}}"
                                style="background: rgba(0,0,0,0.3); padding: 10px; border-radius: 4px; max-height: 600px; overflow-y: auto;">
                            </div>
                            <script id="katana-raw-data-{{.ID}}"
                                type="application/json">{{ json .KatanaOutput }}</script>
                            <script>
                                (function () {
                                    try {
                                        var treeContainer = document.getElementById('katana-tree-{{.ID}}');
                                        var rawElement = document.getElementById('katana-raw-data-{{.ID}}');
                                        if (!rawElement || !treeContainer) return;

                                        var rawContent = rawElement.textContent;
                                        var paths = [];

                                        // 1. Attempt JSON parsing
                                        try {
                                            paths = JSON.parse(rawContent);
                                        } catch (e) {
                                            paths = rawContent;
                                        }

                                        // 2. Resolve nested strings or newline-separated content
                                        if (typeof paths === 'string') {
                                            var trimmed = paths.trim();
                                            if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
                                                try {
                                                    paths = JSON.parse(trimmed);
                                                } catch (e) {
                                                    // Fallback to regex split for mixed content
                                                    paths = trimmed.split(/\r?\n/);
                                                }
                                            } else {
                                                paths = trimmed.split(/\r?\n/);
                                            }
                                        }

                                        // 3. Normalize to Non-Empty Array
                                        if (Array.isArray(paths)) {
                                            paths = paths.filter(function (p) { return p && typeof p === 'string' && p.trim() !== ""; });
                                        } else {
                                            // Should not happen if logic above is correct, but safety net
                                            paths = [];
                                        }

                                        if (paths.length === 0) {
                                            treeContainer.innerHTML = '<span class="text-muted">No paths found.</span>';
                                            return;
                                        }

                                        // 4. Build Tree Structure
                                        var tree = {};
                                        paths.forEach(function (path) {
                                            // Handle URL vs Path: remove protocol/domain if present to reduce noise?
                                            // User requested "Discovered Paths".
                                            // If path is full URL, we split by /
                                            // https://example.com/foo -> ["https:", "", "example.com", "foo"]
                                            // Filter empty -> ["https:", "example.com", "foo"]
                                            var parts = path.split('/').filter(p => p !== "");
                                            var current = tree;
                                            parts.forEach(function (part) {
                                                if (!current[part]) {
                                                    current[part] = {};
                                                }
                                                current = current[part];
                                            });
                                        });

                                        // 5. Render Tree Logic
                                        function renderNode(node, name, parentPath) {
                                            var keys = Object.keys(node).sort();
                                            var isLeaf = keys.length === 0;
                                            var currentPath = parentPath ? parentPath + "/" + name : name;
                                            var container = document.createElement('div');
                                            container.style.marginLeft = "20px";
                                            container.style.lineHeight = "1.5";
                                            var label = document.createElement('div');
                                            label.style.fontFamily = "monospace";

                                            // Copy handling logic
                                            label.onclick = function (e) {
                                                e.stopPropagation();
                                                // If leaf or node, allow copy?
                                                // If node has children, toggle visibility instead?
                                                // Let's implement BOTH: Click name to toggle, Icon to copy? 
                                                // Or just keep it simple.
                                                // User asked "Click to copy full path" previously.
                                                // And collapse/expand.

                                                if (!isLeaf) {
                                                    // Toggle children
                                                    var childDiv = container.querySelector('.children-container');
                                                    if (childDiv) {
                                                        childDiv.style.display = childDiv.style.display === "none" ? "block" : "none";
                                                    }
                                                } else {
                                                    // Copy leaf path
                                                    // Reconstruct full path approximately
                                                    // Note: this reconstruction might be partial if inputs were paths not URLs
                                                    navigator.clipboard.writeText(currentPath).then(function () {
                                                        var originalText = label.textContent;
                                                        label.textContent = name + " (Copied!)";
                                                        setTimeout(function () { label.textContent = name; }, 1000);
                                                    });
                                                }
                                            };

                                            if (isLeaf) {
                                                label.style.color = "#9ca3af";
                                                label.style.cursor = "pointer";
                                                label.title = "Click to copy";
                                                label.textContent = name;
                                            } else {
                                                label.style.color = "#e5e7eb";
                                                label.style.cursor = "pointer";
                                                label.textContent = name + "/";
                                            }

                                            container.appendChild(label);

                                            if (!isLeaf) {
                                                var childrenContainer = document.createElement('div');
                                                childrenContainer.className = 'children-container';
                                                childrenContainer.style.display = "block"; // Changed to BLOCK (Expanded) by default

                                                keys.forEach(function (key) {
                                                    childrenContainer.appendChild(renderNode(node[key], key, currentPath));
                                                });
                                                container.appendChild(childrenContainer);
                                            }
                                            return container;
                                        }

                                        // 6. Append to Container
                                        treeContainer.innerHTML = ""; // Clear existing
                                        var rootKeys = Object.keys(tree).sort();

                                        if (rootKeys.length === 0) {
                                            // Fallback if tree build failed but paths > 0 (e.g. all empty parts?)
                                            // Should have been caught by filter, but just in case
                                            treeContainer.innerHTML = '<span class="text-muted">No paths found.</span>';
                                        } else {
                                            rootKeys.forEach(function (key) {
                                                treeContainer.appendChild(renderNode(tree[key], key, ""));
                                            });
                                            // Handle special root path case if just "/"
                                            if (rootKeys.length === 0 && paths.some(p => p === "/")) {
                                                var div = document.createElement('div');
                                                div.textContent = "/";
                                                div.style.marginLeft = "20px";
                                                div.style.color = "#9ca3af";
                                                treeContainer.appendChild(div);
                                            }
                                        }
                                    } catch (err) {
                                        console.error("Katana Tree Error:", err);
                                        var tc = document.getElementById('katana-tree-{{.ID}}');
                                        if (tc) tc.innerHTML = '<div style="color:red; font-size:0.8rem;">Error rendering paths: ' + err.message + '</div>';
                                    }
                                })();
                            </script>
                        </div>
                        {{end}}
                    </td>
                </tr>
                {{else}}
                <tr>
                    <td colspan="6" class="text-muted">No web assets found yet.</td>
                </tr>
                {{end}}
            </tbody>
        </table>
    </div>
</div>

<!-- Vulnerabilities Tab -->
<div id="vulns" class="tab-content">
    <!-- Nuclei Findings (Grouped by Severity) -->
    {{if .Target.Vulns}}
    <div class="card" style="margin-bottom: 20px;">
        <h3 style="margin-bottom: 15px; font-size: 1.15rem;">Nuclei Findings</h3>
        {{range $sev := $.SeverityOrder}}
        {{$vulns := index $.VulnsBySeverity $sev}}
        {{if $vulns}}
        <div
            style="border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 12px; padding: 0; background: rgba(255,255,255,0.02);">
            <div onclick="toggleBlock('vuln-sev-{{$sev}}')"
                style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px;">
                <div style="display: flex; align-items: center; gap: 12px;">
                    {{if eq $sev "critical"}}<span class="badge"
                        style="background:#7f1d1d;color:#fecaca;padding:3px 10px;font-size:0.8rem;text-transform:capitalize">{{$sev}}</span>{{else
                    if eq $sev "high"}}<span class="badge"
                        style="background:#991b1b;color:#fecaca;padding:3px 10px;font-size:0.8rem;text-transform:capitalize">{{$sev}}</span>{{else
                    if eq $sev
                    "medium"}}<span class="badge"
                        style="background:#9a3412;color:#fed7aa;padding:3px 10px;font-size:0.8rem;text-transform:capitalize">{{$sev}}</span>{{else
                    if eq
                    $sev "low"}}<span class="badge"
                        style="background:#166534;color:#bbf7d0;padding:3px 10px;font-size:0.8rem;text-transform:capitalize">{{$sev}}</span>{{else}}<span
                        class="badge"
                        style="background:#1e40af;color:#bfdbfe;padding:3px 10px;font-size:0.8rem;text-transform:capitalize">{{$sev}}</span>{{end}}
                    <span style="color: var(--color-muted); font-size: 0.95rem;">{{len $vulns}} findings</span>
                </div>
                <!-- Matched EXACTLY to web assets arrow button (line 183-186) -->
                <button style="background:none; border:none; cursor:pointer; color: var(--color-primary);">
                    &#9660;
                </button>
            </div>
            <div id="vuln-sev-{{$sev}}" style="display: none;">
                <table class="table" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Template</th>
                            <th>Name</th>
                            <th>Matcher</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{range $vulns}}
                        <tr style="transition: background 0.2s;"
                            onmouseover="this.style.background='rgba(255,255,255,0.04)'"
                            onmouseout="this.style.background='transparent'">
                            <td style="font-family: monospace; color: var(--color-primary);">
                                {{.TemplateID}}</td>
                            <td>{{.Name}}</td>
                            <td>{{.MatcherName}}</td>
                            <td style="color: var(--color-muted); max-width: 350px;">
                                {{.Description}}</td>
                        </tr>
                        {{end}}
                    </tbody>
                </table>
            </div>
        </div>
        {{end}}
        {{end}}
    </div>
    {{end}}

    <!-- Known Product CVEs from Cvemap -->
    {{if .CVEsByProduct}}
    <div class="card">
        <div onclick="toggleBlock('cve-products-section')"
            style="cursor: pointer; display: flex; justify-content: space-between; align-items: center;">
            <h3 style="margin: 0;">Miscellaneous CVEs for Products</h3>
            <!-- Matched EXACTLY to web assets arrow button -->
            <button style="background:none; border:none; cursor:pointer; color: var(--color-primary);">
                &#9660;
            </button>
        </div>
        <div id="cve-products-section" style="display: none; margin-top: 15px;">
            {{range $product, $cves := .CVEsByProduct}}
            <div
                style="border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 12px; padding: 0; background: rgba(255,255,255,0.02);">
                <div onclick="toggleBlock('cve-product-{{$product}}')"
                    style="cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px;">
                    <div style="display: flex; align-items: center; gap: 10px;">
                        <h4 style="margin: 0; text-transform: capitalize;">{{$product}}</h4>
                        <span class="badge" style="background: var(--bg-hover); color: white;">{{len $cves}} CVEs</span>
                    </div>
                    <div style="display: flex; gap: 5px; align-items: center;">
                        {{range $cves}}
                        {{if eq .Severity "critical"}}<span
                            style="width:8px;height:8px;border-radius:50%;background:#dc2626;display:inline-block"
                            title="Critical"></span>
                        {{else if eq .Severity "high"}}<span
                            style="width:8px;height:8px;border-radius:50%;background:#f97316;display:inline-block"
                            title="High"></span>
                        {{else if eq .Severity "medium"}}<span
                            style="width:8px;height:8px;border-radius:50%;background:#eab308;display:inline-block"
                            title="Medium"></span>
                        {{end}}
                        {{end}}
                        <!-- Matched EXACTLY to web assets arrow button -->
                        <button
                            style="background:none; border:none; cursor:pointer; color: var(--color-primary); margin-left: 5px;">
                            &#9660;
                        </button>
                    </div>
                </div>
                <div id="cve-product-{{$product}}" style="display: none;">
                    <table class="table" style="width: 100%;">
                        <thead>
                            <tr>
                                <th>CVE ID</th>
                                <th>Severity</th>
                                <th>CVSS</th>
                                <th>EPSS</th>
                                <th>KEV</th>
                                <th>PoC</th>
                                <th>Template</th>
                            </tr>
                        </thead>
                        <tbody>
                            {{range $cves}}
                            <tr style="transition: background 0.2s;"
                                onmouseover="this.style.background='rgba(255,255,255,0.04)'"
                                onmouseout="this.style.background='transparent'">
                                <td><a href="https://nvd.nist.gov/vuln/detail/{{.CveID}}" target="_blank"
                                        style="color: var(--color-primary);">{{.CveID}}</a></td>
                                <td>
                                    {{if eq .Severity "critical"}}<span class="badge"
                                        style="background:#7f1d1d;color:#fecaca">{{.Severity}}</span>{{else if eq
                                    .Severity
                                    "high"}}<span class="badge"
                                        style="background:#991b1b;color:#fecaca">{{.Severity}}</span>{{else if eq
                                    .Severity
                                    "medium"}}<span class="badge"
                                        style="background:#9a3412;color:#fed7aa">{{.Severity}}</span>{{else if eq
                                    .Severity
                                    "low"}}<span class="badge"
                                        style="background:#166534;color:#bbf7d0">{{.Severity}}</span>{{else}}<span
                                        class="badge"
                                        style="background:#1e40af;color:#bfdbfe">{{.Severity}}</span>{{end}}
                                </td>
                                <td style="font-family: monospace;">{{printf "%.1f" .CvssScore}}</td>
                                <td style="font-family: monospace;">{{printf "%.4f" .EpssScore}}</td>
                                <td>{{if .IsKEV}}<span
                                        style="color:#ef4444;font-weight:bold">&#10003;</span>{{else}}<span
                                        style="color:var(--color-muted)">&#10007;</span>{{end}}</td>
                                <td>{{if .HasPOC}}<span
                                        style="color:#f59e0b;font-weight:bold">&#10003;</span>{{else}}<span
                                        style="color:var(--color-muted)">&#10007;</span>{{end}}</td>
                                <td>{{if .HasTemplate}}<span
                                        style="color:var(--color-secondary);font-weight:bold">&#10003;</span>{{else}}<span
                                        style="color:var(--color-muted)">&#10007;</span>{{end}}</td>
                            </tr>
                            {{end}}
                        </tbody>
                    </table>
                </div>
            </div>
            {{end}}
        </div>
    </div>
    {{end}}

    {{if and (not .Target.Vulns) (not .CVEsByProduct)}}
    <div class="card">
        <p class="text-muted">No vulnerabilities found yet.</p>
    </div>
    {{end}}
</div>


<!-- Raw Logs Tab -->
<div id="logs" class="tab-content">
    <div class="card">
        {{range .Target.Results}}
        <div style="margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                <span style="font-weight: bold; color: var(--color-primary);">{{.ToolName}}</span>
                <span style="color: var(--color-muted); font-size: 0.8em;">{{.CreatedAt.Format "Jan 02, 15:04"}}</span>
            </div>
            <pre
                style="background: black; padding: 10px; border-radius: 4px; overflow-x: auto; max-height: 200px;">{{.Output}}</pre>
        </div>
        {{else}}
        <p class="text-muted">No raw logs available.</p>
        {{end}}
    </div>
</div>

<style>
    .tab-btn {
        background: transparent;
        border: none;
        color: var(--color-muted);
        padding: 10px 20px;
        cursor: pointer;
        font-size: 1rem;
        border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }

    .tab-btn:hover {
        color: white;
    }

    .tab-btn.active {
        color: white;
        border-bottom: 2px solid var(--color-primary);
    }

    .tab-content {
        display: none;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .table {
        width: 100%;
        border-collapse: collapse;
    }

    .table th,
    .table td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid var(--border-color);
    }

    .table th {
        color: var(--color-muted);
        font-weight: 500;
        font-size: 0.9rem;
    }

    .badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 0.8rem;
        background: var(--bg-hover);
    }
</style>

<!-- Image Modal -->
<div id="imgModal" onclick="closeImage()"
    style="display:none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center;">
    <img id="modalContent"
        style="margin: auto; display: block; max-width: 90%; max-height: 90vh; border: 2px solid white; border-radius: 4px;">
</div>

<script>
    function showTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tab-btn");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        if (evt && evt.currentTarget) {
            evt.currentTarget.className += " active";
        } else {
            for (i = 0; i < tablinks.length; i++) {
                if (tablinks[i].getAttribute('onclick').includes(tabName)) {
                    tablinks[i].className += " active";
                }
            }
        }
        sessionStorage.setItem('activeTargetTab-{{.Target.ID}}', tabName);
    }

    document.addEventListener("DOMContentLoaded", function () {
        const savedTab = sessionStorage.getItem('activeTargetTab-{{.Target.ID}}');
        if (savedTab && document.getElementById(savedTab)) {
            showTab(null, savedTab);
        }
    });

    function toggleRow(id) {
        var x = document.getElementById(id);
        if (x.style.display === "none") {
            x.style.display = "table-row";
        } else {
            x.style.display = "none";
        }
    }

    function toggleBlock(id) {
        var x = document.getElementById(id);
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }

    function showImage(src) {
        var modal = document.getElementById("imgModal");
        var modalImg = document.getElementById("modalContent");
        modal.style.display = "flex";
        modalImg.src = src;
    }

    function closeImage() {
        var modal = document.getElementById("imgModal");
        modal.style.display = "none";
    }

    function copyAllPaths(dataId, btn) {
        var rawEl = document.getElementById(dataId);
        if (!rawEl) return;
        var rawContent = rawEl.textContent;
        var paths = [];
        try {
            paths = JSON.parse(rawContent);
        } catch (e) {
            paths = rawContent;
        }
        if (typeof paths === 'string') {
            var trimmed = paths.trim();
            if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
                try { paths = JSON.parse(trimmed); } catch (e) { paths = trimmed.split(/\r?\n/); }
            } else {
                paths = trimmed.split(/\r?\n/);
            }
        }
        if (Array.isArray(paths)) {
            paths = paths.filter(function (p) { return p && typeof p === 'string' && p.trim() !== ''; });
        } else {
            paths = [];
        }
        if (paths.length === 0) return;
        navigator.clipboard.writeText(paths.join('\n')).then(function () {
            var orig = btn.textContent;
            btn.textContent = 'Copied!';
            btn.style.color = '#10b981';
            setTimeout(function () { btn.textContent = orig; btn.style.color = 'var(--color-muted)'; }, 1500);
        });
    }
</script>
{{end}}