<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IRC VideoChat - Terminal</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">

</head>
<body>
    <!-- Username Modal -->
    <div id="usernameModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>IRC Video Chat Server</h2>
                <p>* Connecting to #videochat...</p>
                <p>* Enter your nickname to join</p>
            </div>
            <form id="usernameForm">
                <div class="input-group">
                    <input type="text" id="usernameInput" placeholder="your_nickname" maxlength="20" required>
                </div>
                <button type="submit" id="joinButton">
                    Join Channel
                </button>
            </form>
        </div>
    </div>

    <!-- Main Chat Interface -->
    <div id="chatInterface" class="hidden">
        <header class="chat-header">
            <div class="header-left">
                <h1>#videochat</h1>
                <span id="participantCount">1 user</span>
            </div>
            <div class="header-right">
                <button id="themeToggle" class="header-btn" title="Toggle theme">
                    🌙
                </button>
                <button id="toggleSelfViewButton" class="header-btn" title="Toggle self view">
                    View
                </button>
            </div>
        </header>

        <main class="chat-main">
            <div id="remoteVideos" class="video-grid" aria-label="Remote Videos"></div>
            
            <!-- Self View (Initially hidden) -->
            <div id="selfViewContainer" class="self-view hidden">
                <video id="selfVideo" autoplay muted></video>
                <div class="self-view-label">
                    <span id="selfViewUsername">[SELF]</span>
                </div>
            </div>
        </main>

        <footer class="chat-controls">
            <button id="muteButton" class="control-btn mute-btn">
                <span>mic</span>
            </button>
            <button id="videoButton" class="control-btn video-btn">
                <span>cam</span>
            </button>
            <button id="hangupButton" class="control-btn hangup-btn">
                <span>disconnect</span>
            </button>
        </footer>
    </div>

    <!-- Hidden local video for WebRTC -->
    <video id="localVideo" autoplay muted style="display: none;"></video>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.js"></script>
    <script src="{{ url_for('static', filename='main.js') }}"></script>
</body>
</html>