{% if active_session %}
    <div class="mb-6">
        <div class="bg-blue-50 border border-blue-200 rounded p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-broadcast-tower text-blue-600"></i>
                </div>
                <div class="ml-4 flex-1">
                    <h3 class="text-lg font-medium text-blue-900">Currently Streaming</h3>
                    <div class="mt-2 grid grid-cols-1 md:grid-cols-3 gap-4 text-sm text-blue-800">
                        <div>
                            <strong>Session ID:</strong> {{ active_session.id|truncatechars:8 }}
                        </div>
                        <div>
                            <strong>Started:</strong> {{ active_session.started_at|date:"M d, Y H:i" }}
                        </div>
                        <div>
                            <strong>Status:</strong> 
                            <span class="px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                {{ active_session.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0">
                    <a href="{% url 'streams:session_detail' active_session.pk %}" 
                       class="px-3 py-2 border border-blue-300 rounded text-sm font-medium text-blue-700 bg-white hover:bg-blue-50">
                        <i class="fas fa-eye mr-2"></i>
                        View Session
                    </a>
                </div>
            </div>
        </div>
    </div>
{% else %}
    <div class="mb-6">
        <div class="bg-gray-50 border border-gray-200 rounded p-4">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-pause-circle text-gray-400"></i>
                </div>
                <div class="ml-4">
                    <h3 class="text-lg font-medium">Stream Not Active</h3>
                    <p class="text-sm text-gray-600">This channel is not currently streaming. Click "Start Stream" to begin capturing.</p>
                </div>
            </div>
        </div>
    </div>
{% endif %}