<% include ../partials/header.ejs %>

<main class="classroom">
    <div class="classroom__heading-container">
        <div class="classroom__heading-content-container">
            <h1 class="classroom__heading">
                <%= room.name %>
            </h1>
            <div class="classroom__controls">
                <div class="classroom__control-group">
                    <div class="control-button status--on">
                        <% include ../svg/video.ejs %>
                        <span>Turn off Camera</span>
                    </div>
                    <div class="control-button status--on">
                        <% include ../svg/mic.ejs %>
                        <span>Mute Mic</span>
                    </div>
                </div>
                <div class="classroom__control-divider"></div>
                <div class="classroom__control-group">
                    <a class="control-button-link" href="/workgroups">
                        <div class="control-button control-button-sq control-button-purple">
                            <% include ../svg/table.ejs %>
                            <span>Create workgroup with current table</span>
                        </div>
                    </a>
                    <a class="control-button-link" href="/classes">
                        <div class="control-button control-button-sq control-button-red">
                            <% include ../svg/exitClass.ejs %>
                            <span>Leave Class</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="classroom__container">
        <div class="classroom__teacher-container">
            <div class="classroom__video video-teacher">
                <video src="/files/video/teacher.mp4" muted autoplay loop></video>
            </div>
        </div>
        <div class="classroom__student-container">
            <div class="classroom__video video-student video-personal">
                <div class="video-status">
                    <div class="status-icon status--video status--on">
                        <% include ../svg/video.ejs %>
                    </div>
                    <div class="status-icon  status--mic status--on">
                        <% include ../svg/mic.ejs %>
                    </div>
                </div>
            </div>
            <div class="classroom__video video-student">
                <div class="video-status">
                    <div class="status-icon  status--mic status--on">
                        <% include ../svg/mic.ejs %>
                    </div>
                </div>
            </div>
            <div class="classroom__video video-student">
                <div class="video-status">
                    <div class="status-icon  status--mic status--on">
                        <% include ../svg/mic.ejs %>
                    </div>
                </div>
            </div>
            <div class="classroom__video video-student">
                <div class="video-status">
                    <div class="status-icon  status--mic status--on">
                        <% include ../svg/mic.ejs %>
                    </div>
                </div>
            </div>
        </div>
        <div class="classroom__chat-container">
            <div class="classroom__chat-channel">
                <div class="channel-select table">
                    <% include ../svg/table.ejs %>
                    <span>Tafel</span>
                </div>
                <div class="channel-select classroom active">
                    <% include ../svg/door.ejs %>
                    <span>Klas</span>
                </div>
            </div>
            <div class="classroom__chat-box-container">
                <div class="classroom__chat-box chat--classroom active" data-chat="classroom">
                    <div class="classroom__chat-message message-user">
                        <span class="author">
                            Tafel C - Jack C.
                        </span>
                        <span class="date">
                            11:23
                        </span>
                        <span class="msg">
                            Hallo!
                        </span>
                    </div>
                    <div class="classroom__chat-message message-teacher">
                        <span class="author">
                            Teacher
                        </span>
                        <span class="date">
                            11:24
                        </span>
                        <span class="msg">
                            Goeiemorgen
                        </span>
                    </div>
                    <div class="classroom__chat-message message-table">
                        <span class="author">
                            Tafel B - Maikel S.
                        </span>
                        <span class="date">
                            11:25
                        </span>
                        <span class="msg">
                            Heyo!
                        </span>
                    </div>
                </div>
                <div class="classroom__chat-box chat--table" data-chat="table">
                   
                </div>
            </div>
            <div class="classroom__chat-input-container">
                <input class="classroom__chat-input" type="text">
                <input class="classroom__chat-send" type="button" value="">
            </div>
        </div>
        <div class="classroom__tables-container">
            <!-- <div class="classroom__chat-channel">
                <div class="channel-select">
                    <% include ../svg/table.ejs %>
                    <span>Tafels</span>
                </div>
            </div> -->
            <div class="classroom__tables">
                <% include ./tablelist.ejs %>
            </div>
        </div>
    </div>

</main>

<% include ../partials/footer.ejs %>