{{define "user/sessions.html"}}
{{template "user/layout_head" .}}
{{template "user_pagehead" (dict "Icon" "bx-chat" "Title" (T "user.sessions.title") "Desc" (T "user.sessions.page_desc"))}}

<style>
.user-sessions-filter .form-label { white-space: nowrap; margin-bottom: 0; }
.user-sessions-summary { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.user-sessions-summary__item {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8125rem; color: #64748b;
}
.user-sessions-summary__num { font-weight: 700; color: #0f172a; }
.user-sessions-visitor-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
  margin-top: .2rem; font-size: .6875rem; color: #94a3b8; line-height: 1.35;
}
.user-sessions-visitor-meta i { font-size: .8rem; vertical-align: -.05em; }
.user-sessions-lead {
  display: inline-flex; align-items: center; gap: .15rem;
  font-weight: 600; font-size: .6875rem;
}
.user-sessions-source { max-width: 220px; }
.user-sessions-source__url {
  display: block; font-size: .8125rem; color: #334155;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-sessions-source__ref {
  display: block; font-size: .6875rem; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-sessions-device {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; color: #64748b; white-space: nowrap;
}
.user-sessions-msg { min-width: 120px; }
.user-sessions-msg__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 999px; background: #f1f5f9; color: #475569;
  font-size: .75rem; font-weight: 600;
}
.user-sessions-msg__preview {
  display: block; margin-top: .2rem; font-size: .6875rem; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.user-sessions-msg__sender {
  display: inline-block; font-size: .625rem; padding: .05rem .3rem;
  border-radius: .25rem; background: #e2e8f0; color: #64748b; margin-right: .2rem;
}
.user-sessions-time { min-width: 108px; }
.user-sessions-time__main { font-size: .8125rem; color: #334155; }
.user-sessions-time__sub { font-size: .6875rem; color: #94a3b8; margin-top: .1rem; }
.user-sessions-agent { font-size: .8125rem; }
.user-sessions-agent--empty { color: #cbd5e1; }
.user-sessions-actions { display: inline-flex; align-items: center; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
.user-sessions-detail-btn {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .28rem .5rem; border-radius: .45rem;
  border: 1px solid #e2e8f0; background: #fff; color: #64748b;
  font-size: .75rem; text-decoration: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.user-sessions-detail-btn:hover { background: #f8fafc; border-color: #cbd5e1; color: #334155; }
@media (max-width: 991.98px) {
  .user-sessions-col-source { display: none; }
}
</style>

<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-3">
    <form method="get" class="row g-2 g-md-3 align-items-end user-sessions-filter">
      <div class="col-auto">
        <label class="form-label small text-muted" for="sessSiteFilter">{{T "user.sessions.filter_site"}}</label>
        <select id="sessSiteFilter" name="site_id" class="form-select form-select-sm" style="min-width: 160px;">
          <option value="0">{{T "user.sessions.all_sites"}}</option>
          {{range index .Data "Sites"}}
          <option value="{{.id}}" {{if eq (asInt (index $.Data "SiteID")) (asInt .id)}}selected{{end}}>{{.name}}</option>
          {{end}}
        </select>
      </div>
      <div class="col-auto">
        <label class="form-label small text-muted" for="sessStatusFilter">{{T "user.sessions.filter_status"}}</label>
        <select id="sessStatusFilter" name="status" class="form-select form-select-sm" style="min-width: 110px;">
          <option value="" {{if eq (index .Data "StatusFilter") -1}}selected{{end}}>{{T "user.sessions.all"}}</option>
          <option value="0" {{if eq (index .Data "StatusFilter") 0}}selected{{end}}>{{T "user.sessions.queued"}}</option>
          <option value="1" {{if eq (index .Data "StatusFilter") 1}}selected{{end}}>{{T "user.sessions.status_active"}}</option>
          <option value="2" {{if eq (index .Data "StatusFilter") 2}}selected{{end}}>{{T "user.sessions.status_closed"}}</option>
        </select>
      </div>
      <div class="col-auto">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-filter-alt me-1"></i>{{T "user.sessions.filter"}}</button>
        <a href="/user/sessions" class="btn btn-light btn-sm">{{T "user.sessions.reset"}}</a>
      </div>
      <div class="col-12 col-lg ms-lg-auto">
        <div class="user-sessions-summary">
          <span class="user-sessions-summary__item">{{T "user.sessions.page_count_prefix"}} <span class="user-sessions-summary__num">{{index (index .Data "Summary") "total"}}</span> {{T "user.sessions.page_count_suffix"}}</span>
          <span class="user-sessions-summary__item"><span class="badge text-bg-warning">{{T "user.sessions.queued"}}</span> <span class="user-sessions-summary__num">{{index (index .Data "Summary") "queued"}}</span></span>
          <span class="user-sessions-summary__item"><span class="badge text-bg-success">{{T "user.sessions.status_active"}}</span> <span class="user-sessions-summary__num">{{index (index .Data "Summary") "active"}}</span></span>
          <span class="user-sessions-summary__item"><span class="badge text-bg-secondary">{{T "user.sessions.status_closed"}}</span> <span class="user-sessions-summary__num">{{index (index .Data "Summary") "closed"}}</span></span>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="card border-0 shadow-sm">
  <div class="table-responsive" data-nc-privacy-menu>
    <table class="table table-sm table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>{{T "user.sessions.col_visitor"}}</th>
          <th>{{T "user.sessions.filter_site"}}</th>
          <th class="user-sessions-col-source">{{T "user.sessions.col_source_device"}}</th>
          <th>{{T "user.sessions.col_messages"}}</th>
          <th>{{T "user.sessions.col_agent"}}</th>
          <th>{{T "user.sessions.filter_status"}}</th>
          <th>{{T "user.sessions.col_time"}}</th>
          <th class="text-end">{{T "user.sessions.col_actions"}}</th>
        </tr>
      </thead>
      <tbody>
      {{range index .Data "Sessions"}}
      <tr>
        <td>
          <a href="#" class="ut-visitor-chat-link js-user-session-chat" data-session-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.sessions.view_chat"}}">
            <span class="ut-visitor-chat-link__avatar"><i class="bx bx-user"></i></span>
            <span class="ut-visitor-chat-link__text">{{privacy "text" .visitor_label}}</span>
            <i class="bx bx-chevron-right ut-visitor-chat-link__arrow" aria-hidden="true"></i>
          </a>
          <div class="user-sessions-visitor-meta">
            {{if gt (asInt .lead_level) 0}}
            <span class="user-sessions-lead" style="color:{{.lead_level_color}}" title="{{.lead_level_name}}"><i class="bx bxs-star"></i>{{.lead_level_name}}</span>
            {{end}}
            {{if .ip_last_masked}}<span><i class="bx bx-map-pin"></i>{{.ip_last_masked}}{{if .geo_short}} · {{.geo_short}}{{end}}</span>{{end}}
            {{if .external_user_id}}<span title="{{T "user.sessions.ext_user_id"}}"><i class="bx bx-id-card"></i>{{.external_user_id}}</span>{{end}}
          </div>
        </td>
        <td class="small">{{.site_name}}</td>
        <td class="user-sessions-col-source">
          <div class="user-sessions-source">
            {{if .source_url}}
            <span class="user-sessions-source__url">{{privacy "url" .source_url}}</span>
            {{else if .source_url_short}}
            <span class="user-sessions-source__url">{{privacy "text" .source_url_short}}</span>
            {{else}}<span class="text-muted small">—</span>{{end}}
            {{if .referrer}}<span class="user-sessions-source__ref">{{T "user.sessions.from"}} {{privacy "url" .referrer}}</span>{{else if .referrer_short}}<span class="user-sessions-source__ref">{{T "user.sessions.from"}} {{privacy "text" .referrer_short}}</span>{{end}}
          </div>
          <div class="user-sessions-device mt-1">
            {{if eq .device_type "mobile"}}<i class="bx bx-mobile-alt"></i>
            {{else if eq .device_type "tablet"}}<i class="bx bx-tablet"></i>
            {{else}}<i class="bx bx-desktop"></i>{{end}}
            {{.device_label}}{{if .browser}} · {{.browser}}{{end}}
          </div>
        </td>
        <td class="user-sessions-msg">
          <span class="user-sessions-msg__count">{{if gt (asInt .msg_count) 0}}{{.msg_count}}{{else}}0{{end}}</span>
          {{if .last_msg_preview}}
          <span class="user-sessions-msg__preview" title="{{.last_msg_content}}">
            {{if .last_msg_sender_label}}<span class="user-sessions-msg__sender">{{.last_msg_sender_label}}</span>{{end}}{{.last_msg_preview}}
          </span>
          {{end}}
        </td>
        <td class="user-sessions-agent">
          {{if .agent_name}}{{.agent_name}}{{else}}<span class="user-sessions-agent--empty">{{T "user.sessions.unassigned"}}</span>{{end}}
        </td>
        <td>
          {{if eq (asInt .status) 0}}<span class="badge text-bg-warning">{{T "user.sessions.queued"}}</span>
          {{else if eq (asInt .status) 1}}<span class="badge text-bg-success">{{T "user.sessions.status_active"}}</span>
          {{else}}<span class="badge text-bg-secondary">{{T "user.sessions.status_closed"}}</span>{{end}}
          {{if .duration_label}}<div class="small text-muted mt-1">{{.duration_label}}</div>{{end}}
        </td>
        <td class="user-sessions-time">
          <div class="user-sessions-time__main">{{unixTime .updated_at}}</div>
          {{if .created_at_text}}<div class="user-sessions-time__sub">{{T "user.sessions.started"}} {{.created_at_text}}</div>{{end}}
          {{if .last_message_at_text}}<div class="user-sessions-time__sub">{{T "user.sessions.last_msg"}} {{.last_message_at_text}}</div>{{end}}
        </td>
        <td class="text-end">
          <div class="user-sessions-actions">
            {{if .session_ref}}<a href="/user/sessions/{{.session_ref}}" class="user-sessions-detail-btn" title="{{T "user.sessions.detail_title"}}"><i class="bx bx-detail"></i><span>{{T "user.sessions.detail"}}</span></a>{{end}}
            <a href="#" class="ut-session-chat-btn js-user-session-chat" data-session-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.sessions.view_chat"}}">
              <i class="bx bx-conversation"></i><span>{{T "user.sessions.chat"}}</span>
            </a>
          </div>
        </td>
      </tr>
      {{else}}
      <tr><td colspan="8" class="text-center text-muted py-4">{{T "user.sessions.empty"}}</td></tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>
{{template "user/session_chat_modal" .}}
{{template "user/layout_foot" .}}
{{end}}