{% load orbit_tags %}

{% if entries %}
<table class="w-full">
    <thead class="sticky top-0 bg-orbit-bg-secondary/95 backdrop-blur border-b border-orbit-border">
        <tr class="text-left text-xs text-orbit-text-muted uppercase tracking-wider">
            <th class="px-4 py-3 w-12">Type</th>
            <th class="px-4 py-3">Summary</th>
            <th class="px-4 py-3 w-24 text-right">Duration</th>
            <th class="px-4 py-3 w-32 text-right">Time</th>
        </tr>
    </thead>
    <tbody class="divide-y divide-orbit-border/50">
        {% for entry in entries %}
        <tr 
            data-entry-id="{{ entry.id }}"
            class="entry-row cursor-pointer border-l-2 border-transparent hover:border-orbit-accent-cyan transition-all {% if entry.is_error %}bg-rose-500/5{% elif entry.is_warning %}bg-amber-500/5{% endif %}">
            
            <!-- Type Icon -->
            <td class="px-4 py-3">
                <div class="w-8 h-8 rounded-lg flex items-center justify-center 
                    {% if entry.type == 'request' %}bg-cyan-500/10 text-cyan-400
                    {% elif entry.type == 'query' %}bg-emerald-500/10 text-emerald-400
                    {% elif entry.type == 'log' %}bg-slate-500/10 text-slate-400
                    {% elif entry.type == 'exception' %}bg-rose-500/10 text-rose-400
                    {% elif entry.type == 'job' %}bg-amber-500/10 text-amber-400
                    {% endif %}">
                    {% if entry.type == 'request' %}
                    <i data-lucide="globe" class="w-4 h-4"></i>
                    {% elif entry.type == 'query' %}
                    <i data-lucide="database" class="w-4 h-4"></i>
                    {% elif entry.type == 'log' %}
                    <i data-lucide="file-text" class="w-4 h-4"></i>
                    {% elif entry.type == 'exception' %}
                    <i data-lucide="alert-triangle" class="w-4 h-4"></i>
                    {% elif entry.type == 'job' %}
                    <i data-lucide="clock" class="w-4 h-4"></i>
                    {% endif %}
                </div>
            </td>
            
            <!-- Summary -->
            <td class="px-4 py-3">
                <div class="flex items-center gap-3">
                    <!-- Status/Level Badge for specific types -->
                    {% if entry.type == 'request' %}
                        {% with status=entry.payload.status_code %}
                        <span class="text-xs font-mono px-2 py-0.5 rounded 
                            {% if status >= 500 %}bg-rose-500/20 text-rose-400
                            {% elif status >= 400 %}bg-amber-500/20 text-amber-400
                            {% elif status >= 300 %}bg-blue-500/20 text-blue-400
                            {% else %}bg-emerald-500/20 text-emerald-400
                            {% endif %}">{{ status }}</span>
                        {% endwith %}
                        <span class="text-xs font-medium text-orbit-accent-cyan">{{ entry.payload.method }}</span>
                    {% elif entry.type == 'log' %}
                        {% with level=entry.payload.level %}
                        <span class="text-xs font-mono px-2 py-0.5 rounded 
                            {% if level == 'ERROR' or level == 'CRITICAL' %}bg-rose-500/20 text-rose-400
                            {% elif level == 'WARNING' %}bg-amber-500/20 text-amber-400
                            {% elif level == 'DEBUG' %}bg-slate-500/20 text-slate-400
                            {% else %}bg-cyan-500/20 text-cyan-400
                            {% endif %}">{{ level }}</span>
                        {% endwith %}
                    {% elif entry.type == 'query' %}
                        {% if entry.payload.is_slow %}
                        <span class="text-xs font-mono px-2 py-0.5 rounded bg-amber-500/20 text-amber-400">SLOW</span>
                        {% endif %}
                        {% if entry.payload.is_duplicate %}
                        <span class="text-xs font-mono px-2 py-0.5 rounded bg-violet-500/20 text-violet-400">DUP</span>
                        {% endif %}
                    {% endif %}
                    
                    <!-- Main Summary Text -->
                    <span class="text-sm text-orbit-text-primary font-mono truncate max-w-md">
                        {{ entry.summary }}
                    </span>
                </div>
                
                <!-- Additional context -->
                {% if entry.type == 'query' and entry.payload.caller.filename %}
                <div class="mt-1 text-xs text-orbit-text-muted font-mono truncate">
                    {{ entry.payload.caller.filename }}:{{ entry.payload.caller.lineno }}
                </div>
                {% elif entry.type == 'log' %}
                <div class="mt-1 text-xs text-orbit-text-muted">
                    {{ entry.payload.logger }}
                </div>
                {% endif %}
            </td>
            
            <!-- Duration -->
            <td class="px-4 py-3 text-right">
                {% if entry.duration_ms %}
                <span class="text-sm font-mono 
                    {% if entry.duration_ms > 500 %}text-rose-400
                    {% elif entry.duration_ms > 100 %}text-amber-400
                    {% else %}text-orbit-text-secondary
                    {% endif %}">
                    {{ entry.duration_ms|floatformat:1 }}ms
                </span>
                {% else %}
                <span class="text-orbit-text-muted">-</span>
                {% endif %}
            </td>
            
            <!-- Timestamp -->
            <td class="px-4 py-3 text-right">
                <span class="text-xs text-orbit-text-muted font-mono">
                    {{ entry.created_at|time:"H:i:s" }}
                </span>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% if has_more %}
<div class="p-4 text-center">
    <button 
        hx-get="{% url 'orbit:feed' %}?type={{ current_type }}&offset={{ offset|add:limit }}"
        hx-target="closest table tbody"
        hx-swap="beforeend"
        class="px-4 py-2 text-sm text-orbit-text-secondary hover:text-orbit-text-primary bg-orbit-bg-tertiary hover:bg-orbit-bg-tertiary/80 rounded-lg transition-all">
        Load More
    </button>
</div>
{% endif %}

{% else %}
<div class="flex flex-col items-center justify-center h-full text-orbit-text-muted py-20">
    <div class="w-16 h-16 rounded-2xl bg-orbit-bg-tertiary flex items-center justify-center mb-4">
        <i data-lucide="inbox" class="w-8 h-8"></i>
    </div>
    <p class="text-lg font-medium mb-2">No entries yet</p>
    <p class="text-sm text-orbit-text-muted">Telemetry data will appear here as your app processes requests</p>
</div>
{% endif %}