{% load static %}

{% if sessions %}
    {% for session in sessions %}
    <div class="session-item {% if session.is_active %}active{% elif session.expires_at < now %}expired{% endif %}"
         data-session-id="{{ session.session_id }}">
        <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1">
                <div class="fw-bold">
                    {{ session.user.get_full_name }}
                    {% if session.is_current_session %}
                        <span class="badge bg-primary ms-2">Current</span>
                    {% endif %}
                </div>
                <div class="text-muted small">
                    <i class="fas fa-desktop me-1"></i>{{ session.device_type|title }}
                    <span class="mx-2">•</span>
                    <i class="fas fa-globe me-1"></i>{{ session.ip_address }}
                    <span class="mx-2">•</span>
                    <i class="fas fa-map-marker-alt me-1"></i>{{ session.location|default:"Unknown location" }}
                </div>
                <div class="text-muted small">
                    <i class="fas fa-clock me-1"></i>
                    Started: {{ session.created_at|date:"M d, H:i" }}
                    <span class="mx-2">•</span>
                    Last activity: {{ session.last_activity_at|timesince }} ago
                </div>
                {% if session.browser_name %}
                <div class="text-muted small">
                    <i class="fas fa-browser me-1"></i>{{ session.browser_name }} {{ session.browser_version }}
                </div>
                {% endif %}
            </div>
            
            <div class="ms-3">
                {% if session.is_active %}
                    <span class="badge bg-success">Active</span>
                    {% if not session.is_current_session %}
                    <button class="btn btn-sm btn-outline-danger ms-2" 
                            hx-post="{% url 'accounts:end_session' session.session_id %}"
                            hx-confirm="End this session?"
                            hx-target="closest .session-item"
                            hx-swap="outerHTML">
                        <i class="fas fa-times"></i>
                    </button>
                    {% endif %}
                {% else %}
                    <span class="badge bg-secondary">Ended</span>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
{% else %}
    <div class="text-center py-3 text-muted">
        <i class="fas fa-desktop fa-2x mb-2"></i>
        <p>No sessions found</p>
    </div>
{% endif %}