@include(snippets/header)
<div class="pagewrapper">
<div id="main" class="session-grid">
  <h2 class="session-page-title">
    Sessions
    <span class="session-stats">
      @if(activeUsers > 0)
      ({{ activeUsers }} active: {{ activeUserList.join(', ') }})
      @else
      (0 active)
      @endif
    </span>
  </h2>
  @each(sessions as s)
  <div class="session-card {{ s.id === session.sess_id ? 'current' : '' }}">
    <div class="session-header">
      <span class="session-user">{!! s.user !!}</span>
      <div class="session-badges">
        @if(s.id === session.sess_id)
        <span class="badge badge-current">Current</span>
        @endif
        @if(s.kmsi)
        <span class="badge badge-kmsi" title="Keep Me Signed In">KMSI</span>
        @endif
        <span class="session-id">#{{ s.id }}</span>
        @if(s.id !== session.sess_id)
        <a href="javascript:void(0)" onclick="deleteSession({{ s.id }}, this)" class="session-delete"
          title="Delete Session">&#10006;</a>
        @endif
      </div>
    </div>
    <div class="session-body">
      <div class="session-info">
        <span class="label">Browser:</span>
        <span class="value browser-info" title="{{ s.browser }}">{{ s.browser }}</span>
      </div>
      <div class="session-info">
        <span class="label">Created:</span>
        <span class="value">{{ new Date(s.created_at * 1e3).toLocaleString(lang) }}</span>
      </div>
      <div class="session-info">
        <span class="label">Last Used:</span>
        <span class="value">{{ new Date(s.last_used * 1e3).toLocaleString(lang) }}</span>
      </div>
      <div class="session-info">
        <span class="label">Last Action:</span>
        <span class="value">{{ s.last_action }}</span>
      </div>
    </div>
  </div>
  @endeach
  <script>
    async function deleteSession(id, el) {
      if (!confirm('Are you sure you want to delete this session?')) return;

      try {
        const res = await fetch('/api/v2/admin/sessions/delete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id })
        });
        const data = await res.json();

        if (data.success) {
          // Remove the card
          const card = el.closest('.session-card');
          card.style.opacity = '0';
          setTimeout(() => card.remove(), 200);
        } else {
          alert(data.msg || 'Failed to delete session');
        }
      } catch (err) {
        console.error(err);
        alert('An error occurred');
      }
    }
  </script>
</div>
</div>
@include(snippets/footer)