{include file="_partials/head.tpl"}

<style>
  .tl{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px 20px;margin-top:18px}
  .tl-item{display:grid;grid-template-columns:150px 1fr;gap:4px 14px;padding:13px 0;border-bottom:1px solid var(--border-soft)}
  .tl-item:last-child{border-bottom:0}
  .tl-time{color:var(--text-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
  .tl-label{color:var(--text);font-weight:600;font-size:14px}
  .tl-url{grid-column:2;color:var(--text-muted);font-size:12.5px;word-break:break-all}
  .tl-meta{grid-column:2;color:var(--text-muted);font-size:12px}
  .tl-type{display:inline-block;font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);margin-left:8px}
</style>

<div class="page-head">
  <div>
    <h1>{title}</h1>
    <p class="muted"><a href="/admin/analytics">← К аналитике</a></p>
  </div>
</div>

[if {is_empty}="1"]
<div class="empty-state">
  {icon name="chart" size="42"}
  <p>Событий по этому идентификатору не найдено.</p>
</div>
[else]
<div class="tl">
  [foreach var="items" as="i"]
    <div class="tl-item">
      <div class="tl-time">{i.time}</div>
      <div>
        <span class="tl-label">{i.label}</span><span class="tl-type">{i.type}</span>
        [if {i.url}]<div class="tl-url">{i.url}</div>[/if]
        <div class="tl-meta">{i.source} · {i.device}[if {i.country}] · {i.country}[/if][if {i.referrer}] · ← {i.referrer}[/if]</div>
      </div>
    </div>
  [/foreach]
</div>
[/if]

{include file="_partials/foot.tpl"}
