{{define "user/session_detail.html"}}
{{template "user/layout_head" .}}
{{$s := index .Data "Session"}}
{{template "user_pagehead" (dict "Icon" "bx-conversation" "Title" (printf (T "user.session_detail.title_fmt") $s.id) "Desc" $s.site_name "Back" true "BackFallback" "/user/sessions")}}
<style>
.ut-pagehead-back { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.ut-pagehead-back i { font-size: 1.15rem; line-height: 1; }
</style>
<div class="row g-3">
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm"><div class="card-header bg-white fw-semibold">{{T "user.session_detail.messages"}}</div><div class="card-body" style="max-height:480px;overflow-y:auto">
    {{range index .Data "Messages"}}
      <div class="mb-2 {{if eq (asInt .sender_type) 1}}text-end{{end}}">
        <span class="d-inline-block px-3 py-2 rounded {{if eq (asInt .sender_type) 1}}bg-primary text-white{{else if eq (asInt .sender_type) 2}}bg-light{{else}}bg-secondary-subtle small{{end}}">{{.content}}</span>
        <div class="small text-muted">{{unixTime .created_at}}</div>
      </div>
    {{else}}<p class="text-muted">{{T "user.session_detail.no_messages"}}</p>{{end}}
    </div></div>
  </div>
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm mb-3"><div class="card-body">
      <h6 class="fw-semibold">{{T "user.session_detail.visitor"}}</h6>
      <dl class="small mb-0">
        <dt>IP</dt><dd>{{$s.ip_last_masked}}{{if $s.geo_label}} <span class="text-muted">（{{$s.geo_label}}）</span>{{end}}</dd>
        <dt>{{T "user.session_detail.browser"}}</dt><dd>{{$s.browser}} / {{$s.os}}</dd>
        <dt>{{T "user.session_detail.device"}}</dt><dd>{{$s.device_type}}</dd>
        <dt>{{T "user.session_detail.referrer"}}</dt><dd class="text-break">{{privacy "url" $s.referrer}}</dd>
        <dt>{{T "user.session_detail.source"}}</dt><dd class="text-break">{{privacy "url" $s.source_url}}</dd>
      </dl>
    </div></div>
    <div class="card border-0 shadow-sm" data-nc-privacy-menu><div class="card-body">
      <h6 class="fw-semibold">{{T "user.session_detail.trail"}}</h6>
      <ul class="list-unstyled small mb-0">
      {{range index .Data "Events"}}
        <li class="mb-1"><span class="text-muted">{{unixTime .created_at}}</span> {{privacy "url" .url}}</li>
      {{else}}<li class="text-muted">{{T "user.session_detail.no_trail"}}</li>{{end}}
      </ul>
    </div></div>
  </div>
</div>
<script>
(function () {
  var btn = document.querySelector('.ut-pagehead-back');
  if (!btn) return;
  btn.addEventListener('click', function () {
    var fallback = btn.getAttribute('data-fallback') || '/user/sessions';
    if (window.history.length > 1) {
      history.back();
      return;
    }
    location.href = fallback;
  });
})();
</script>
{{template "user/layout_foot" .}}
{{end}}