{% extends "base.html" %}
{% block title %}{{ device.hostname }} — AidaIDE Cloud Portal{% endblock %}
{% block content %}

<a href="/web/devices" class="back">&larr; All devices</a>

<header class="detail-head">
  <div class="detail-head__title">
    <h1>{{ device.hostname }}</h1>
    <div class="detail-head__badges">
      <span id="device-status-badge"
            hx-get="/web/devices/{{ device.id }}/status"
            hx-trigger="every 15s"
            hx-target="this"
            hx-swap="innerHTML">
        <span class="pill {{ pill_class }}">{{ pill_text }}</span>
      </span>
      {% if is_owner %}<span class="pill owner">Owner</span>{% endif %}
    </div>
  </div>
  <div class="detail-head__id" title="{{ device.id }}">
    <span class="muted small">ID</span>
    <code>{{ device.id }}</code>
    <button type="button" class="copy-btn" data-copy="{{ device.id }}" title="Copy device ID">Copy</button>
  </div>
  <div class="detail-head__actions">
    <a class="btn primary" href="/webportal/d/{{ device.id }}/">Open portal &rarr;</a>
    <a class="btn" href="/webportal/d/{{ device.id }}/remote-desktop">Remote access</a>
    <a class="btn" href="/web/devices/{{ device.id }}/field">Field mode</a>
    <button type="button" class="btn ghost" data-copy="https://api.aidaide.app/webportal/d/{{ device.id }}/">Copy portal URL</button>
    {% if is_owner %}
    <form class="inline-form" hx-post="/web/devices/{{ device.id }}/get-help"
          hx-target="#help-result" hx-swap="innerHTML">
      <input type="hidden" name="duration" value="60">
      <button type="submit" class="btn" title="Mint a one-link help session (Read + Prompt)">Get help</button>
    </form>
    {% endif %}
  </div>
</header>
{% if is_owner %}<div id="help-result" class="help-result"></div>{% endif %}

<div class="stat-strip">
  <div class="stat">
    <div class="stat__label">Status</div>
    <div class="stat__value" id="device-status-value">{{ pill_text }}</div>
  </div>
  <div class="stat">
    <div class="stat__label">Last check-in</div>
    <div class="stat__value">
      {% if device.last_seen_at %}<span data-iso="{{ device.last_seen_at.isoformat() }}">{{ seen_age }} ({{ device.last_seen_at.strftime('%Y-%m-%d %H:%M UTC') }})</span>{% else %}<span class="muted">never</span>{% endif %}
    </div>
  </div>
  <div class="stat">
    <div class="stat__label">Cert expires</div>
    <div class="stat__value">
      {% if device.cert_expires_at %}<span data-iso="{{ device.cert_expires_at.isoformat() }}">{{ device.cert_expires_at.strftime('%Y-%m-%d') }}</span>{% else %}<span class="muted">&mdash;</span>{% endif %}
    </div>
  </div>
  <div class="stat">
    <div class="stat__label">Audit retention</div>
    <div class="stat__value">{{ device.audit_retention_days or 90 }} days</div>
  </div>
</div>

<nav class="tabs">
  <button class="tab active" data-tab="preview" onclick="showTab('preview')">Preview</button>
  {% if is_owner %}
  <button class="tab" data-tab="access" onclick="showTab('access')">Access</button>
  <button class="tab" data-tab="groups" onclick="showTab('groups')">Groups</button>
  <button class="tab" data-tab="approvals" onclick="showTab('approvals')">Approvals</button>
  <button class="tab" data-tab="audit" onclick="showTab('audit')">Audit</button>
  {% endif %}
</nav>

<section id="tab-preview" class="tabpane active">
  <div class="preview-wrap">
    <div class="preview-wrap__bar">
      <span class="preview-wrap__dot"></span>
      <span class="preview-wrap__url"><code>api.aidaide.app/webportal/d/{{ device.id }}/</code></span>
      <a class="preview-wrap__open" href="/webportal/d/{{ device.id }}/" target="_blank" rel="noopener">Open in new tab &rarr;</a>
    </div>
    <iframe class="preview" src="/webportal/d/{{ device.id }}/hello"></iframe>
  </div>
  <p class="muted small" style="margin-top: 10px;">Live preview through the tunnel. If the frame is blank, the desktop client may be offline &mdash; check the toolbar Portal indicator on that PC.</p>
</section>

{% if is_owner %}
<section id="tab-access" class="tabpane"
         hx-get="/web/devices/{{ device.id }}/access"
         hx-trigger="load, refreshAccess from:body"
         hx-target="this" hx-swap="innerHTML">
  <p class="muted">Loading access...</p>
</section>

<section id="tab-groups" class="tabpane"
         hx-get="/web/devices/{{ device.id }}/groups"
         hx-trigger="revealed, refreshGroups from:body"
         hx-target="this" hx-swap="innerHTML">
  <p class="muted">Loading groups...</p>
</section>

<section id="tab-approvals" class="tabpane"
         hx-get="/web/devices/{{ device.id }}/approvals"
         hx-trigger="revealed, every 3s"
         hx-target="this" hx-swap="innerHTML">
  <p class="muted">Loading pending approvals...</p>
</section>

<section id="tab-audit" class="tabpane"
         hx-get="/web/devices/{{ device.id }}/audit"
         hx-trigger="revealed"
         hx-target="this" hx-swap="innerHTML">
  <p class="muted">Loading audit log...</p>
</section>
{% endif %}

<!-- Drop B: host for the Invite-a-guest modal. Lives OUTSIDE #tab-access so
     a background refreshAccess reload of the Access panel never wipes an
     open modal (the success state in particular). -->
<div id="modal-host"></div>

<script>
function showTab(name) {
  document.querySelectorAll('.tab').forEach(t => t.classList.toggle('active', t.dataset.tab === name));
  document.querySelectorAll('.tabpane').forEach(p => p.classList.toggle('active', p.id === 'tab-' + name));
  if (name !== 'preview') htmx.trigger('#tab-' + name, 'revealed');
}

// Copy buttons: any element with data-copy="..." copies that value to clipboard and flashes a "Copied" label.
(function() {
  document.addEventListener('click', function(e) {
    var t = e.target.closest('[data-copy]');
    if (!t) return;
    var val = t.getAttribute('data-copy');
    if (!val) return;
    e.preventDefault();
    var orig = t.textContent;
    navigator.clipboard.writeText(val).then(function() {
      t.textContent = 'Copied';
      t.classList.add('copied');
      setTimeout(function() {
        t.textContent = orig;
        t.classList.remove('copied');
      }, 1200);
    }).catch(function() {
      t.textContent = 'Copy failed';
      setTimeout(function() { t.textContent = orig; }, 1500);
    });
  });
})();

// Make any <span data-iso="..."> show a relative-time tooltip on hover.
// Exposed as window.applyRelTime so HTMX-swapped partials can re-apply it.
window.applyRelTime = function() {
  function fmtRel(iso) {
    var then = new Date(iso); var now = new Date();
    var diff = Math.floor((now - then) / 1000);
    if (isNaN(diff)) return iso;
    if (diff < 0) return 'in ' + Math.abs(diff) + 's';
    if (diff < 60)  return diff + 's ago';
    if (diff < 3600) return Math.floor(diff/60) + 'm ago';
    if (diff < 86400) return Math.floor(diff/3600) + 'h ago';
    if (diff < 86400*30) return Math.floor(diff/86400) + 'd ago';
    return then.toLocaleDateString();
  }
  document.querySelectorAll('[data-iso]').forEach(function(el) {
    el.title = fmtRel(el.getAttribute('data-iso'));
  });
};
window.applyRelTime();

// Drop B: live time-to-expiry countdowns on pass rows (data-expires).
// Re-rendered text matches the server's "expires in 47m" style.
window.applyExpiryCountdowns = function() {
  var now = new Date();
  document.querySelectorAll('[data-expires]').forEach(function(el) {
    var exp = new Date(el.getAttribute('data-expires'));
    var secs = Math.floor((exp - now) / 1000);
    if (isNaN(secs)) return;
    var label;
    if (secs <= 0) label = 'expired';
    else if (secs < 3600) label = 'expires in ' + Math.floor(secs/60) + 'm';
    else if (secs < 86400) label = 'expires in ' + Math.floor(secs/3600) + 'h';
    else label = 'expires in ' + Math.floor(secs/86400) + 'd';
    el.textContent = label;
  });
};
window.applyExpiryCountdowns();
setInterval(window.applyExpiryCountdowns, 30000);

// Tail reconstructed 2026-07-09: the file was tail-truncated mid-comment
// ("// Drop B: c") by an earlier edit; the page failed to render (missing
// endblock) from that point on. Re-apply the dynamic time labels after any
// HTMX swap so partial reloads (Access/Approvals/Audit) stay live.
document.body.addEventListener('htmx:afterSwap', function() {
  window.applyRelTime();
  window.applyExpiryCountdowns();
});
</script>
<script src="/static/is_mobile.js"></script>
<script src="/static/field_offer.js"></script>

{% endblock %}