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

<style>
.user-visitors-filter .form-label { white-space: nowrap; margin-bottom: 0; }
.user-visitors-summary { display: flex; flex-wrap: wrap; gap: .5rem .75rem; }
.user-visitors-summary__item {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8125rem; color: #64748b;
}
.user-visitors-summary__num { font-weight: 700; color: #0f172a; }
.user-visitors-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-visitors-meta i { font-size: .8rem; vertical-align: -.05em; }
.user-visitors-lead {
  display: inline-flex; align-items: center; gap: .15rem;
  font-weight: 600; font-size: .6875rem;
}
.user-visitors-device {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; color: #64748b; white-space: nowrap;
}
.user-visitors-landing {
  display: block; margin-top: .25rem; font-size: .6875rem; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.user-visitors-tag {
  display: inline-block; font-size: .6875rem; padding: .12rem .45rem;
  border-radius: 999px; background: #f1f5f9; color: #475569;
  margin-right: .2rem; margin-bottom: .15rem;
}
.user-visitors-notes {
  display: block; margin-top: .15rem; font-size: .6875rem; color: #94a3b8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.user-visitors-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem;
  border-radius: 999px; background: #eff6ff; color: #2563eb;
  font-size: .8125rem; font-weight: 600;
}
.user-visitors-time { min-width: 108px; }
.user-visitors-time__main { font-size: .8125rem; color: #334155; }
.user-visitors-time__sub { font-size: .6875rem; color: #94a3b8; margin-top: .1rem; }
.user-visitors-actions { display: inline-flex; align-items: center; justify-content: flex-end; }
.user-visitors-empty { padding: 3rem 1.5rem; text-align: center; color: #94a3b8; }
.user-visitors-empty i { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .45; }
@media (max-width: 991.98px) {
  .user-visitors-col-landing { 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-visitors-filter">
      <div class="col-auto">
        <label class="form-label small text-muted" for="visSiteFilter">{{T "user.visitors.filter_site"}}</label>
        <select id="visSiteFilter" name="site_id" class="form-select form-select-sm" style="min-width: 180px;">
          <option value="0">{{T "user.visitors.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">
        <button type="submit" class="btn btn-primary btn-sm"><i class="bx bx-filter-alt me-1"></i>{{T "user.visitors.filter"}}</button>
        <a href="/user/visitors" class="btn btn-light btn-sm">{{T "user.visitors.reset"}}</a>
      </div>
      <div class="col-12 col-lg ms-lg-auto">
        <div class="user-visitors-summary">
          <span class="user-visitors-summary__item">{{T "user.visitors.page_prefix"}} <span class="user-visitors-summary__num">{{index (index .Data "Summary") "total"}}</span> {{T "user.visitors.page_suffix"}}</span>
          <span class="user-visitors-summary__item"><i class="bx bxs-star text-warning"></i> {{T "user.visitors.marked"}} <span class="user-visitors-summary__num">{{index (index .Data "Summary") "tagged"}}</span></span>
          <span class="user-visitors-summary__item"><i class="bx bx-mobile-alt"></i> {{T "user.visitors.mobile"}} <span class="user-visitors-summary__num">{{index (index .Data "Summary") "mobile"}}</span></span>
          <span class="user-visitors-summary__item"><i class="bx bx-revision"></i> {{T "user.visitors.total_visits"}} <span class="user-visitors-summary__num">{{index (index .Data "Summary") "visits"}}</span> {{T "user.visitors.times_suffix"}}</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.visitors.col_visitor"}}</th>
          <th>{{T "user.visitors.filter_site"}}</th>
          <th class="user-visitors-col-landing">{{T "user.visitors.col_device_landing"}}</th>
          <th>{{T "user.visitors.col_tags"}}</th>
          <th class="text-center">{{T "user.visitors.col_visits"}}</th>
          <th>{{T "user.visitors.col_active"}}</th>
          <th class="text-end">{{T "user.visitors.col_actions"}}</th>
        </tr>
      </thead>
      <tbody>
      {{range index .Data "Visitors"}}
      <tr>
        <td>
          <a href="#" class="ut-visitor-chat-link js-user-session-chat" data-visitor-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.visitors.view_chat"}}">
            <span class="ut-visitor-chat-link__avatar"><i class="bx bx-user"></i></span>
            <span class="ut-visitor-chat-link__text">{{.visitor_label}}</span>
            <i class="bx bx-chevron-right ut-visitor-chat-link__arrow" aria-hidden="true"></i>
          </a>
          <div class="user-visitors-meta">
            {{if gt (asInt .lead_level) 0}}
            <span class="user-visitors-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}}{{else if .geo_label}} · {{.geo_label}}{{end}}</span>{{end}}
            {{if .external_user_id}}<span title="{{T "user.visitors.ext_user_id"}}"><i class="bx bx-id-card"></i>{{.external_user_id}}</span>{{end}}
            {{if .email}}<span title="{{T "privacy_hover_hint"}}"><i class="bx bx-envelope"></i>{{privacy "email" .email}}</span>{{end}}
          </div>
        </td>
        <td class="small">{{.site_name}}</td>
        <td class="user-visitors-col-landing">
          <div class="user-visitors-device">
            {{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}}{{if .os}} · {{.os}}{{end}}
          </div>
          {{if .landing_url}}
          <span class="user-visitors-landing">{{privacy "url" .landing_url}}</span>
          {{else if .landing_url_short}}
          <span class="user-visitors-landing">{{privacy "text" .landing_url_short}}</span>
          {{end}}
        </td>
        <td>
          {{if .tags}}
          {{range .tags}}<span class="user-visitors-tag">{{.}}</span>{{end}}
          {{else}}<span class="text-muted small">—</span>{{end}}
          {{if .agent_notes_short}}<span class="user-visitors-notes" title="{{.agent_notes}}"><i class="bx bx-note"></i> {{.agent_notes_short}}</span>{{end}}
        </td>
        <td class="text-center">
          <span class="user-visitors-count">{{.visit_count}}</span>
        </td>
        <td class="user-visitors-time">
          <div class="user-visitors-time__main">{{unixTime .last_seen_at}}</div>
          {{if .first_seen_at_text}}<div class="user-visitors-time__sub">{{T "user.visitors.first"}} {{.first_seen_at_text}}</div>{{end}}
        </td>
        <td class="text-end">
          <div class="user-visitors-actions">
            <a href="#" class="ut-session-chat-btn js-user-session-chat" data-visitor-id="{{.id}}" data-title="{{.visitor_label}}" title="{{T "user.visitors.view_chat"}}">
              <i class="bx bx-conversation"></i><span>{{T "user.visitors.chat"}}</span>
            </a>
          </div>
        </td>
      </tr>
      {{else}}
      <tr>
        <td colspan="7">
          <div class="user-visitors-empty">
            <i class="bx bx-user-x"></i>
            <div>{{T "user.visitors.empty_title"}}</div>
            <p class="small mb-0 mt-1">{{T "user.visitors.empty_hint"}}</p>
          </div>
        </td>
      </tr>
      {{end}}
      </tbody>
    </table>
  </div>
</div>

{{template "user/session_chat_modal" .}}
{{template "user/layout_foot" .}}
{{end}}