{% extends "base.html" %}
{% block title %}Ticket {{ ticket_id }}{% endblock %}
{% block head_extra %}
<script src="{{ url_for('static', filename='js/vault_password_widget.js') }}"></script>
{% endblock %}
{% block content %}
<div class="app-page-header">
  <h1><i class="fas fa-ticket-alt" aria-hidden="true"></i> Ticket #{{ ticket_id }}</h1>
  <div class="app-page-header-actions">
    <a class="btn btn-secondary btn-sm" href="{{ url_for('organization_tickets_page') }}"><i class="fas fa-arrow-left"></i> Tickets</a>
  </div>
</div>
<div id="ticket-detail-root" class="filters-section portal-ticket-detail-wrap" style="padding:12px;"><div class="loading-state"><div class="spinner"></div><span>Loading…</span></div></div>
<script>
(function(){
  const TID = parseInt('{{ ticket_id|int }}', 10);
  const root = document.getElementById('ticket-detail-root');
  const DOC_BASE = '/organization/documents/';

  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }
  function normalizeBody(s) {
    return String(s == null ? '' : s).replace(/\r\n/g, '\n').replace(/\r/g, '\n');
  }
  function normalizeBreakTokens(raw) {
    return normalizeBody(raw)
      .replace(/&lt;\s*br\s*\/?\s*&gt;/gi, '\n')
      .replace(/&#10;|&#x0a;|&#x0A;/g, '\n');
  }
  function looksLikeHtmlBody(raw) {
    const s = String(raw == null ? '' : raw).trim();
    if (!s) return false;
    return /<(?:p|div|span|h[1-6]|ul|ol|li|pre|code|table|thead|tbody|tr|th|td|blockquote|br|hr|strong|em|a|img)\b/i.test(s);
  }
  function looksLikeMarkdownBody(raw) {
    const s = normalizeBreakTokens(raw).trim();
    if (!s || looksLikeHtmlBody(s)) return false;
    return /(^|\n)\s{0,3}(#{1,6}\s|[-*+]\s|>\s|\d+\.\s|```|~~~)|\[[^\]]+\]\([^)]+\)|\*\*[^*\n]+\*\*|`[^`\n]+`/.test(s);
  }
  function escapeAttr(s) {
    return String(s == null ? '' : s).replace(/"/g, '&quot;');
  }
  function sanitizeAllowedHtml(html) {
    if (!html) return '';
    const host = document.createElement('div');
    host.innerHTML = html;
    const allowed = ['P','BR','UL','OL','LI','STRONG','B','EM','I','CODE','PRE','DIV','SPAN','A','H1','H2','H3','H4','H5','H6','BLOCKQUOTE','HR','TABLE','THEAD','TBODY','TR','TH','TD','IMG'];
    const allowedAttrs = { A: ['href', 'target', 'rel', 'title', 'class'], IMG: ['src', 'alt', 'class'], CODE: ['class'], PRE: ['class'], SPAN: ['class'], DIV: ['class'], P: ['class'], TABLE: ['class'] };
    const safeHref = function(href){
      const v = String(href || '').trim().toLowerCase();
      return v.startsWith('http://') || v.startsWith('https://') || v.startsWith('mailto:') || v.startsWith('tel:') || v.startsWith('/');
    };
    const safeImgSrc = function(src){
      const v = String(src || '').trim().toLowerCase();
      return v.startsWith('/api/attachments/') || v.startsWith('https://') || v.startsWith('http://') || v.startsWith('data:image/');
    };
    const walk = function(node){
      if (node.nodeType !== 1) return;
      if (allowed.indexOf(node.tagName) === -1) {
        node.replaceWith(document.createTextNode(node.textContent || ''));
        return;
      }
      const keep = allowedAttrs[node.tagName] || [];
      for (let i = node.attributes.length - 1; i >= 0; i--) {
        const name = node.attributes[i].name;
        if (keep.indexOf(name) === -1) node.removeAttribute(name);
      }
      if (node.tagName === 'A') {
        const href = node.getAttribute('href');
        if (!href || !safeHref(href)) {
          node.removeAttribute('href');
        } else {
          if (!String(href).startsWith('/')) node.setAttribute('target', '_blank');
          node.setAttribute('rel', 'noopener noreferrer nofollow');
        }
      }
      if (node.tagName === 'IMG') {
        const src = node.getAttribute('src');
        if (!src || !safeImgSrc(src)) node.removeAttribute('src');
      }
      Array.from(node.childNodes).forEach(walk);
    };
    Array.from(host.childNodes).forEach(walk);
    return host.innerHTML;
  }
  function renderPlainBody(raw) {
    return esc(normalizeBreakTokens(raw).replace(/<br\s*\/?>/gi, '\n')).replace(/\n/g, '<br>');
  }
  function renderMarkdownBody(raw) {
    const normalized = normalizeBreakTokens(raw);
    if (typeof window.applyMarkdownStyling === 'function') {
      return sanitizeAllowedHtml(window.applyMarkdownStyling(esc(normalized)));
    }
    return renderBasicMarkdown(normalized);
  }
  function renderBasicMarkdown(raw) {
    const lines = normalizeBody(raw).split('\n');
    let inCode = false;
    let inUl = false;
    let inOl = false;
    const closeLists = function() {
      let out = '';
      if (inUl) { out += '</ul>'; inUl = false; }
      if (inOl) { out += '</ol>'; inOl = false; }
      return out;
    };
    const inline = function(text) {
      return esc(text)
        .replace(/`([^`\n]+)`/g, '<code>$1</code>')
        .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
        .replace(/\*([^*\n]+)\*/g, '<em>$1</em>')
        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, function(_, label, href){
          const safe = String(href || '').trim();
          return '<a href="' + escapeAttr(safe) + '">' + label + '</a>';
        });
    };
    const chunks = [];
    lines.forEach(function(line){
      const codeFence = line.match(/^\s*```/);
      if (codeFence) {
        chunks.push(closeLists());
        if (!inCode) {
          inCode = true;
          chunks.push('<pre><code>');
        } else {
          inCode = false;
          chunks.push('</code></pre>');
        }
        return;
      }
      if (inCode) {
        chunks.push(esc(line) + '\n');
        return;
      }
      const heading = line.match(/^\s{0,3}(#{1,6})\s+(.*)$/);
      if (heading) {
        chunks.push(closeLists());
        const level = heading[1].length;
        chunks.push('<h' + level + '>' + inline(heading[2]) + '</h' + level + '>');
        return;
      }
      const ul = line.match(/^\s*[-*+]\s+(.*)$/);
      if (ul) {
        if (inOl) { chunks.push('</ol>'); inOl = false; }
        if (!inUl) { chunks.push('<ul>'); inUl = true; }
        chunks.push('<li>' + inline(ul[1]) + '</li>');
        return;
      }
      const ol = line.match(/^\s*\d+\.\s+(.*)$/);
      if (ol) {
        if (inUl) { chunks.push('</ul>'); inUl = false; }
        if (!inOl) { chunks.push('<ol>'); inOl = true; }
        chunks.push('<li>' + inline(ol[1]) + '</li>');
        return;
      }
      const quote = line.match(/^\s*>\s?(.*)$/);
      if (quote) {
        chunks.push(closeLists());
        chunks.push('<blockquote>' + inline(quote[1]) + '</blockquote>');
        return;
      }
      if (!line.trim()) {
        chunks.push(closeLists());
        chunks.push('<br>');
        return;
      }
      chunks.push(closeLists());
      chunks.push('<p>' + inline(line) + '</p>');
    });
    chunks.push(closeLists());
    if (inCode) chunks.push('</code></pre>');
    return sanitizeAllowedHtml(chunks.join(''));
  }
  function renderTicketBody(raw) {
    const text = normalizeBreakTokens(raw).trim();
    if (!text) return '';
    if (looksLikeHtmlBody(text)) return sanitizeAllowedHtml(text);
    if (looksLikeMarkdownBody(text)) return renderMarkdownBody(text);
    return renderPlainBody(text);
  }
  function portalAttachmentUrl(serveUrl) {
    if (!serveUrl) return '';
    return String(serveUrl).replace(/^\/api\/client-portal\//, '/api/portal/');
  }
  function formatTs(iso) {
    if (!iso) return '—';
    try {
      const d = new Date(iso);
      if (isNaN(d.getTime())) return iso;
      return d.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
    } catch (e) { return iso; }
  }
  function formatDateOnly(iso) {
    if (!iso) return '—';
    try {
      return new Date(iso).toLocaleDateString(undefined, { dateStyle: 'medium' });
    } catch (e) { return iso; }
  }
  function money(n) {
    const x = Number(n);
    if (isNaN(x)) return '—';
    return '$' + x.toFixed(2);
  }

  async function jget(url) {
    const r = await fetch(url);
    let j = {};
    try { j = await r.json(); } catch (e) {}
    return { ok: r.ok, j };
  }

  function renderDl(rows) {
    if (!rows || !rows.length) return '';
    return '<table class="client-table-simple portal-ticket-dl"><tbody>' +
      rows.filter(function(row) { return row && row[1] != null && row[1] !== ''; }).map(function(row) {
        return '<tr><td>' + esc(row[0]) + '</td><td>' + row[1] + '</td></tr>';
      }).join('') + '</tbody></table>';
  }

  function buildActivity(t) {
    const activity = [];
    (t.comments || []).forEach(function(c) {
      activity.push({
        ts: c.created_at,
        icon: 'fa-comment-dots',
        label: 'Update',
        body: c.body || '',
        isNote: true
      });
    });
    (t.time_entries || []).forEach(function(te) {
      activity.push({
        ts: te.created_at || te.start_time,
        icon: 'fa-clock',
        label: 'Time',
        body: (te.user || 'Technician') + (te.description ? ' — ' + te.description : '') +
          ' (' + (te.duration_minutes || 0) + ' min)',
        isNote: false
      });
    });
    (t.charges || []).forEach(function(ch) {
      activity.push({
        ts: ch.created_at,
        icon: 'fa-receipt',
        label: 'Line item',
        body: (ch.name || 'Item') + (ch.category ? ' · ' + ch.category : '') + ' · Qty ' + (ch.quantity != null ? ch.quantity : ''),
        isNote: false
      });
    });
    activity.sort(function(a, b) { return String(a.ts || '').localeCompare(String(b.ts || '')); });
    return activity;
  }

  (async function load() {
    const main = await jget('/api/portal/organization/tickets/' + TID);
    if (!main.ok || !main.j.success || !main.j.ticket) {
      root.innerHTML = '<p class="muted">' + esc(main.j.error || 'Not found') + '</p>';
      return;
    }
    const t = main.j.ticket;
    const capR = await jget('/api/portal/organization/capabilities');
    const caps = (capR.j && capR.j.success && capR.j.capabilities) ? capR.j.capabilities : {};

    const fetches = [
      jget('/api/portal/organization/tickets/' + TID + '/invoices'),
      jget('/api/portal/organization/tickets/' + TID + '/estimates'),
      jget('/api/portal/organization/tickets/' + TID + '/attachments')
    ];
    if (caps.docs_read) fetches.push(jget('/api/portal/organization/tickets/' + TID + '/documents'));
    if (caps.vault_read) fetches.push(jget('/api/portal/organization/tickets/' + TID + '/vault-entries'));

    const results = await Promise.all(fetches);
    let idx = 0;
    const invRes = results[idx++];
    const estRes = results[idx++];
    const attRes = results[idx++];
    let docsRes = { ok: false, j: {} };
    let vaultRes = { ok: false, j: {} };
    if (caps.docs_read) docsRes = results[idx++];
    if (caps.vault_read) vaultRes = results[idx++];

    const invoices = (invRes.ok && invRes.j.success && invRes.j.invoices) ? invRes.j.invoices : [];
    const estimates = (estRes.ok && estRes.j.success && estRes.j.estimates) ? estRes.j.estimates : [];
    const attachments = (attRes.ok && attRes.j.success && attRes.j.attachments) ? attRes.j.attachments : [];
    const documents = (docsRes.ok && docsRes.j.success && docsRes.j.documents) ? docsRes.j.documents : [];
    const vaultEntries = (vaultRes.ok && vaultRes.j.success && vaultRes.j.entries) ? vaultRes.j.entries : [];

    const glanceRows = [
      ['Status', '<span class="portal-ticket-badge">' + esc(t.status || '—') + '</span>'],
      ['Priority', '<span class="portal-ticket-badge portal-ticket-badge-priority">' + esc(t.priority || '—') + '</span>'],
      ['Type', esc(t.type || '—')],
      ['Category', esc(t.category || '—')],
      ['Assigned to', esc(t.assigned_to || '—')],
      ['Due', formatDateOnly(t.due_date)],
      ['Created', formatTs(t.created_at)],
      ['Last updated', formatTs(t.updated_at)]
    ];

    let orgBlock = '';
    if (t.customer) {
      const c = t.customer;
      const lines = [
        '<strong>' + esc(c.name || '') + '</strong>',
        c.email ? '<a href="mailto:' + esc(c.email) + '">' + esc(c.email) + '</a>' : '',
        c.phone ? '<a href="tel:' + esc(c.phone) + '">' + esc(c.phone) + '</a>' : '',
        [c.address_line1, c.city, c.state].filter(Boolean).join(', ')
      ].filter(Boolean);
      orgBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-building" aria-hidden="true"></i> Organization</h2>' +
        '<p class="portal-ticket-lead">' + lines.join('<br/>') + '</p></div>';
    }

    let contactsBlock = '';
    const contactRows = [];
    if (t.contact) {
      const c = t.contact;
      contactRows.push(['Primary contact', '<strong>' + esc(c.name || '') + '</strong><br/><span class="muted">' +
        (c.email ? esc(c.email) + ' · ' : '') + (c.phone ? esc(c.phone) : '') + '</span>' + (c.role ? '<br/><span class="muted">' + esc(c.role) + '</span>' : '')]);
    }
    (t.linked_contacts || []).forEach(function(lc) {
      if (t.contact && lc.id === t.contact.id) return;
      contactRows.push(['Contact', '<strong>' + esc(lc.name || '') + '</strong><br/><span class="muted">' +
        (lc.email || '') + (lc.phone ? ' · ' + lc.phone : '') + '</span>']);
    });
    if (contactRows.length) {
      contactsBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-address-book" aria-hidden="true"></i> People</h2>' +
        renderDl(contactRows) + '</div>';
    }

    let assetBlock = '';
    const assetRows = [];
    if (t.asset) {
      const a = t.asset;
      assetRows.push(['Primary device', esc(a.name || '') + (a.ip ? '<br/><span class="muted">IP ' + esc(a.ip) + '</span>' : '') +
        (a.location ? '<br/><span class="muted">' + esc(a.location) + '</span>' : '')]);
    }
    (t.linked_assets || []).forEach(function(a) {
      if (t.asset && a.id === t.asset.id) return;
      assetRows.push(['Linked device', esc(a.name || '') + (a.ip ? '<br/><span class="muted">' + esc(a.ip) + '</span>' : '')]);
    });
    if (assetRows.length) {
      assetBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-desktop" aria-hidden="true"></i> Devices</h2>' +
        renderDl(assetRows) + '</div>';
    }

    let netBlock = '';
    const netRows = [];
    if (t.network) {
      netRows.push(['Primary network', esc(t.network.name || '') + (t.network.cidr ? '<br/><span class="muted">' + esc(t.network.cidr) + '</span>' : '')]);
    }
    (t.linked_networks || []).forEach(function(n) {
      if (t.network && n.id === t.network.id) return;
      netRows.push(['Network', esc(n.name || '') + (n.cidr ? '<br/><span class="muted">' + esc(n.cidr) + '</span>' : '')]);
    });
    if (netRows.length) {
      netBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-network-wired" aria-hidden="true"></i> Networks</h2>' +
        renderDl(netRows) + '</div>';
    }

    let relatedBlock = '';
    const relParts = [];
    if (t.parent_ticket) {
      const p = t.parent_ticket;
      relParts.push('<p><span class="muted">Part of</span> <a href="/organization/tickets/' + p.id + '">#' + p.id + ' ' + esc(p.title || '') + '</a> <span class="muted">(' + esc(p.status || '') + ')</span></p>');
    }
    if (t.child_tickets && t.child_tickets.length) {
      relParts.push('<p class="muted" style="margin-bottom:6px;">Related requests</p><ul class="portal-ticket-list">');
      t.child_tickets.forEach(function(c) {
        relParts.push('<li><a href="/organization/tickets/' + c.id + '">#' + c.id + ' ' + esc(c.title || '') + '</a> <span class="muted">· ' + esc(c.status || '') + '</span></li>');
      });
      relParts.push('</ul>');
    }
    if (relParts.length) {
      relatedBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-sitemap" aria-hidden="true"></i> Related tickets</h2>' + relParts.join('') + '</div>';
    }

    let wsBlock = '';
    if (t.worksheets && t.worksheets.length) {
      wsBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-clipboard-check" aria-hidden="true"></i> Work to be done</h2>';
      t.worksheets.forEach(function(ws) {
        const openAttr = ws.is_closed ? '' : ' open';
        let itemsHtml = '';
        (ws.items || []).forEach(function(it) {
          const done = it.is_completed ? ' portal-ticket-ws-done' : '';
          itemsHtml += '<li class="' + done + '">' + esc(it.description || '') +
            (it.notes ? '<div class="muted portal-ticket-ws-note">' + esc(it.notes) + '</div>' : '') + '</li>';
        });
        wsBlock += '<details class="portal-ticket-details"' + openAttr + '><summary>' + esc(ws.name || 'Checklist') +
          (ws.is_closed ? ' <span class="muted">(closed)</span>' : '') + '</summary><ul class="portal-ticket-ws-items">' +
          (itemsHtml || '<li class="muted">No items</li>') + '</ul></details>';
      });
      wsBlock += '</div>';
    }

    let timeBlock = '';
    if (t.time_entries && t.time_entries.length) {
      const rows = t.time_entries.map(function(te) {
        return '<tr><td>' + formatTs(te.created_at || te.start_time) + '</td><td>' + esc(te.user || '') + '</td><td>' +
          esc(te.description || '') + '</td><td>' + (te.duration_minutes != null ? te.duration_minutes : '—') + '</td><td>' +
          money(te.amount) + '</td></tr>';
      });
      timeBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-stopwatch" aria-hidden="true"></i> Time</h2>' +
        '<div class="table-container"><table class="client-table-simple"><thead><tr><th>When</th><th>Who</th><th>Notes</th><th>Min</th><th>Amount</th></tr></thead><tbody>' +
        rows.join('') + '</tbody></table></div></div>';
    }

    let chargesBlock = '';
    if (t.charges && t.charges.length) {
      const rows = t.charges.map(function(ch) {
        return '<tr><td>' + esc(ch.name || '') + '</td><td>' + esc(ch.category || '') + '</td><td>' + (ch.quantity != null ? esc(String(ch.quantity)) : '—') + '</td><td>' + money(ch.amount) + '</td></tr>';
      });
      chargesBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-file-invoice-dollar" aria-hidden="true"></i> Charges</h2>' +
        '<div class="table-container"><table class="client-table-simple"><thead><tr><th>Item</th><th>Category</th><th>Qty</th><th>Amount</th></tr></thead><tbody>' +
        rows.join('') + '</tbody></table></div></div>';
    }

    let billBlock = '';
    const billParts = [];
    if (invoices.length) {
      billParts.push('<h3 class="portal-ticket-h3">Invoices</h3><div class="table-container"><table class="client-table-simple"><thead><tr><th>ID</th><th>Status</th><th>Total</th><th>Due</th></tr></thead><tbody>');
      invoices.forEach(function(i) {
        billParts.push('<tr><td>#' + esc(String(i.id)) + '</td><td>' + esc(i.status || '') + '</td><td>' + money(i.total) + '</td><td>' + formatDateOnly(i.due_date) + '</td></tr>');
      });
      billParts.push('</tbody></table></div>');
    }
    if (estimates.length) {
      billParts.push('<h3 class="portal-ticket-h3">Estimates</h3><div class="table-container"><table class="client-table-simple"><thead><tr><th>ID</th><th>Status</th><th>Total</th><th>Expires</th></tr></thead><tbody>');
      estimates.forEach(function(e) {
        billParts.push('<tr><td>#' + esc(String(e.id)) + '</td><td>' + esc(e.status || '') + '</td><td>' + money(e.total) + '</td><td>' + formatDateOnly(e.expires_at) + '</td></tr>');
      });
      billParts.push('</tbody></table></div>');
    }
    if (billParts.length) {
      billBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-file-invoice" aria-hidden="true"></i> Billing</h2>' + billParts.join('') + '</div>';
    }

    let filesBlock = '';
    const fileParts = [];
    if (attachments.length) {
      fileParts.push('<h3 class="portal-ticket-h3">Attachments</h3><div class="portal-ticket-attachments">');
      attachments.forEach(function(a) {
        const url = portalAttachmentUrl(a.serve_url);
        const isImg = a.content_type && String(a.content_type).indexOf('image/') === 0;
        if (isImg && url) {
          fileParts.push('<a class="portal-ticket-att-thumb" href="' + esc(url) + '" target="_blank" rel="noopener"><img src="' + esc(url) + '" alt=""/></a>');
        } else {
          fileParts.push('<div class="portal-ticket-att-row"><a href="' + esc(url) + '" target="_blank" rel="noopener">' + esc(a.display_name || 'File') + '</a>' +
            (a.size != null ? '<span class="muted"> · ' + esc(String(a.size)) + ' bytes</span>' : '') + '</div>');
        }
      });
      fileParts.push('</div>');
    }
    if (caps.docs_read && documents.length) {
      fileParts.push('<h3 class="portal-ticket-h3">Documents</h3><ul class="portal-ticket-list">');
      documents.forEach(function(d) {
        fileParts.push('<li><a href="' + DOC_BASE + d.id + '">' + esc(d.title || ('Document #' + d.id)) + '</a>' +
          (d.updated_at ? '<span class="muted"> · ' + formatDateOnly(d.updated_at) + '</span>' : '') + '</li>');
      });
      fileParts.push('</ul>');
    }
    if (fileParts.length) {
      filesBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-paperclip" aria-hidden="true"></i> Files &amp; documentation</h2>' + fileParts.join('') + '</div>';
    }

    let vaultBlock = '';
    if (caps.vault_read && vaultEntries.length) {
      vaultBlock = '<div class="portal-ticket-card" id="portalTicketVaultBlock"><h2 class="portal-ticket-h2"><i class="fas fa-key" aria-hidden="true"></i> Saved passwords</h2>' +
        '<div class="table-container tnt-vault-table-wrap"><table class="client-table-simple tnt-vault-table"><thead><tr><th>Name</th><th>Username</th><th>Password</th></tr></thead><tbody>';
      vaultEntries.forEach(function(e) {
        var VP = window.TntVaultPassword;
        var nameCell = VP ? VP.renderNameCell(e.id, e.name) : esc(e.name || 'Entry');
        var userCell = VP ? VP.renderUsernameCell(e.username) : esc(e.username || '—');
        var pwCell = VP ? VP.renderPasswordCell(e.id, e.has_password !== false) : '—';
        vaultBlock += '<tr><td>' + nameCell + '</td><td>' + userCell + '</td><td>' + pwCell + '</td></tr>';
      });
      vaultBlock += '</tbody></table></div>' +
        '<p style="margin-top:10px;"><a class="btn btn-secondary btn-sm" href="/organization/vault"><i class="fas fa-external-link-alt"></i> Open password vault</a></p></div>';
    }

    let scanBlock = '';
    if (t.network_scans && t.network_scans.length) {
      scanBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-search" aria-hidden="true"></i> Network scans</h2><div class="portal-ticket-scan-grid">';
      t.network_scans.forEach(function(s) {
        scanBlock += '<div class="portal-ticket-scan-card"><strong>' + esc(s.network_name || 'Scan') + '</strong>' +
          '<div class="muted">' + formatTs(s.scan_time) + '</div>' +
          (s.ip_range ? '<div class="muted">' + esc(s.ip_range) + '</div>' : '') +
          '<div>' + (s.device_count != null ? esc(String(s.device_count)) + ' devices seen' : '') + '</div>' +
          (s.description ? '<p class="muted">' + esc(s.description) + '</p>' : '') + '</div>';
      });
      scanBlock += '</div></div>';
    }

    const notesParts = [];
    (t.comments || []).forEach(function(c) {
      notesParts.push('<div class="portal-ticket-note"><div class="portal-ticket-note-meta"><strong>' + esc(c.author || 'Team') + '</strong> · ' + formatTs(c.created_at) + '</div>' +
        '<div class="portal-ticket-note-body">' + renderTicketBody(c.body || '') + '</div></div>');
    });
    const notesBlock = notesParts.length
      ? '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-comments" aria-hidden="true"></i> Updates from the team</h2>' + notesParts.join('') + '</div>'
      : '';

    const activity = buildActivity(t);
    let actBlock = '';
    if (activity.length) {
      actBlock = '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-stream" aria-hidden="true"></i> Activity timeline</h2><div class="portal-ticket-activity">';
      activity.forEach(function(a) {
        const rendered = a.isNote ? renderTicketBody(a.body || '') : renderPlainBody(a.body || '');
        actBlock += '<div class="portal-ticket-act-row"><i class="fas ' + esc(a.icon) + '" aria-hidden="true"></i><div><div class="muted">' +
          esc(a.label) + ' · ' + formatTs(a.ts) + '</div><div class="portal-ticket-note-body">' + rendered + '</div></div></div>';
      });
      actBlock += '</div></div>';
    }

    const desc = (t.description || '').trim()
      ? '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-align-left" aria-hidden="true"></i> Description</h2>' +
        '<div class="portal-ticket-desc portal-ticket-note-body">' + renderTicketBody(t.description || '') + '</div></div>'
      : '';

    root.innerHTML =
      '<div class="portal-ticket-hero"><h2 class="portal-ticket-title">' + esc(t.title || 'Ticket') + '</h2>' +
      '<p class="muted portal-ticket-sub">Request #' + TID + (t.source ? ' · Source: ' + esc(t.source) : '') + '</p></div>' +
      '<div class="portal-ticket-layout">' +
      '<div class="portal-ticket-col-main">' +
      desc +
      notesBlock +
      actBlock +
      wsBlock +
      timeBlock +
      chargesBlock +
      scanBlock +
      '</div>' +
      '<div class="portal-ticket-col-side">' +
      '<div class="portal-ticket-card"><h2 class="portal-ticket-h2"><i class="fas fa-info-circle" aria-hidden="true"></i> At a glance</h2>' + renderDl(glanceRows) + '</div>' +
      orgBlock +
      contactsBlock +
      assetBlock +
      netBlock +
      relatedBlock +
      billBlock +
      filesBlock +
      vaultBlock +
      '</div></div>';
    if (window.TntVaultPassword) {
      var vaultEl = document.getElementById('portalTicketVaultBlock');
      if (vaultEl) window.TntVaultPassword.bindContainer(vaultEl);
    }
  })().catch(function(e) {
    root.innerHTML = '<p class="muted">Failed to load ticket.</p>';
    console.error(e);
  });
})();
</script>
{% endblock %}