 <!-- Main Card -->

<div class="bg-white rounded-2xl shadow-xl overflow-hidden">
    <!-- Video Container -->
    <div class="p-6 pt-0">
        <div class="relative rounded-lg overflow-hidden shadow-lg bg-slate-900">
            <video id="video" 
                    autoplay 
                    playsinline 
                    muted 
                    class="w-full h-auto max-w-full bg-slate-900 rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center text-white">
                    <div class="text-center">
                        <svg class="w-16 h-16 mx-auto mb-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 6a2 2 0 012-2h6l2 2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12l3-3 3 3m0 0v-3m0 3H9"/>
                        </svg>
                        <p class="text-slate-400">No video stream</p>
                    </div>
                </div>
            </video>
        </div>
    </div>

    <!-- Controls -->
    <div class="p-6 text-center border-b border-slate-200">
        <div class="flex justify-center space-x-4">
            <button id="startButton" 
                    class="inline-flex items-center px-6 py-3 bg-stream-green hover:bg-green-600 text-white font-semibold rounded-lg shadow-md transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
                </svg>
                Start Stream
            </button>
            <button id="stopButton" 
                    disabled
                    class="inline-flex items-center px-6 py-3 bg-stream-red hover:bg-red-600 disabled:bg-slate-300 disabled:cursor-not-allowed text-white font-semibold rounded-lg shadow-md transition-all duration-200 transform hover:scale-105 disabled:transform-none focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 disabled:focus:ring-0">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8 7a1 1 0 012 0v6a1 1 0 11-2 0V7zM12 7a1 1 0 012 0v6a1 1 0 11-2 0V7z" clip-rule="evenodd"/>
                </svg>
                Stop Stream
            </button>
        </div>
    </div>

    <!-- Status -->
    <div class="p-4">
        <div id="status" class="flex items-center justify-center py-3 px-4 rounded-lg font-medium transition-all duration-300 bg-red-50 text-red-800 border border-red-200">
            <div class="flex items-center">
                <div class="w-2 h-2 bg-red-500 rounded-full mr-2 animate-pulse"></div>
                Disconnected
            </div>
        </div>
    </div>
</div>
