<?php
// Front-end layout for Sincotechs Video Chat
?>
<div class="svc-page">
    <h1 class="svc-page-title">Video Chat</h1>

    <div class="svc-layout">
        <!-- Users column -->
        <aside class="svc-panel svc-panel-users">
            <h2 class="svc-panel-heading">Users</h2>
            <ul id="svc-users-list" class="svc-users-list"></ul>
        </aside>

        <!-- Video column -->
        <main class="svc-panel svc-panel-video">
            <div class="svc-video-stack">
                <div class="svc-video-box svc-video-box-main">
                    <video id="svc-main-video" autoplay playsinline muted></video>

                    <div class="svc-video-controls">
                        <button id="svc-toggle-mic" type="button" title="Mute / Unmute">
                            <span class="svc-icon">🎙️</span>
                        </button>
                        <button id="svc-fullscreen" type="button" title="Full screen">
                            <span class="svc-icon">⤢</span>
                        </button>
                        <button id="svc-switch-camera" type="button" title="Switch camera">
                            <span class="svc-icon">📷</span>
                        </button>
                    </div>
                </div>

                <div class="svc-video-box svc-video-box-remote">
                    <video id="svc-remote-video" autoplay playsinline muted></video>
                </div>
            </div>

            <div class="svc-room-switcher">
                <div class="svc-current-room">
                    <span>Current room: </span><strong id="svc-current-room-name">Lobby</strong>
                </div>
                <div class="svc-room-buttons" id="svc-room-buttons"></div>
                <div class="svc-room-create">
                    <input type="text" id="svc-new-room-name" placeholder="Create new room...">
                    <button type="button" id="svc-create-room-btn">Create</button>
                </div>
            </div>
        </main>

        <!-- Chat column -->
        <aside class="svc-panel svc-panel-chat">
            <h2 class="svc-panel-heading">Chat</h2>

            <div class="svc-profile-settings">
                <label class="svc-profile-field">
                    <span>Name</span>
                    <input type="text" id="svc-display-name" value="">
                </label>
                <label class="svc-profile-field">
                    <span>Text color</span>
                    <input type="color" id="svc-text-color">
                </label>
                <label class="svc-profile-field">
                    <span>Country code</span>
                    <input type="text" id="svc-country-code" maxlength="2">
                </label>
                <button type="button" id="svc-save-profile" class="svc-profile-save">Save</button>
            </div>

            <div id="svc-chat-messages" class="svc-chat-messages"></div>

            <div class="svc-chat-input">
                <textarea id="svc-chat-text" placeholder="Type a message..."></textarea>
                <button type="button" id="svc-send-message">Send</button>
            </div>
        </aside>
    </div>
</div>
