{{define "header"}}
{{if .Chat}}
<script type="application/javascript" src="/static/js/wasm_exec.js"></script>
<script type="application/javascript" src="/static/js/chat.js"></script>
<script>
    maxMessageCount = {{.MessageHistoryCount }}
</script>
<style>
    .root {
        display: grid;
    }
</style>
{{end}}

{{if .Video}}
<script type="application/javascript" src="/static/js/flv.min.js"></script>
<script type="application/javascript" src="/static/js/video.js"></script>
{{if not .Chat}}
<style>
    #videoElement {
        height: 99vh;
    }
</style>
{{end}}
{{end}}

{{if and .Video .Chat}}
<style>
    .root {
        grid-template-columns: 5fr 1fr;
    }
</style>
{{end}}
{{end}}

{{define "body"}}
{{if .Video}}
<video id="videoElement" controls autoplay x5-video-player-type="h5" x5-video-player-fullscreen="true" playsinline
    webkit-playsinline>
    Your browser is too old and doesn't support HTML5 video.
</video>
{{end}}

{{if .Chat}}
<div id="chatwindow">
    <div id="notifyBox"></div>
    <div id="chat" style="display: none;">
        <div id="optionBox">Please hover to view options</div>
        <div id="hidden">
            <div id="chatButtons">
                <input type="button" class="button pretty-button" onclick="auth();" value="Auth" />
                <input type="button" class="button pretty-button" onclick="help();" value="Help" />
                <input type="button" class="button pretty-button" onclick="showColors();" value="Color" />
                <input type="button" class="button pretty-button" onclick="nick();" value="Nick" />
                {{if .Video}}
                <input type="button" class="button pretty-button" onclick="initPlayer();" value="Reload Player" />
                {{end}}
            </div>
            <hr />
            <label class="contrast">
                <input type="checkbox" checked="false" onchange="setTimestamp(this.checked);" />
                Show Timestamp
            </label>
            <hr />
            <div id="hiddencolor" class="hiddendiv">
                <div class="range-div" style="background-image: linear-gradient(to right, transparent, red);">
                    <input id="colorRed" type="range" min="0" max="255" value="0" oninput="updateColor();" />
                    <span id="colorRedLabel"></span>
                </div>
                <div class="range-div" style="background-image: linear-gradient(to right, transparent, green);">
                    <input id="colorGreen" type="range" min="0" max="255" value="0" oninput="updateColor();" />
                    <span id="colorGreenLabel"></span>
                </div>
                <div class="range-div" style="background-image: linear-gradient(to right, transparent, blue);">
                    <input id="colorBlue" type="range" min="0" max="255" value="0" oninput="updateColor();" />
                    <span id="colorBlueLabel"></span>
                </div>
                <div class="range-div">
                    <select id="colorSelect" onchange="colorSelectChange();"></select>
                </div>
                <div id="colorName" class="range-div">
                    NAME
                </div>
                <div id="colorWarning" class="range-div contrast">
                </div>
                <dvi class="range-div">
                    <input id="colorSubmit" type="button" class="button pretty-button" value="Select"
                        onclick="changeColor();" />
                </dvi>
            </div>
        </div>
        <a id="playing" target="_blank"></a>
        <div id="messages" class="scrollbar"></div>
        <div id="msgbox">
            <div id="suggestions" class="scrollbar"></div>
            <textarea id="msg"></textarea>
        </div>
        <input id="send" type="button" class="button" onclick="sendChat();" value="Send" />
        <div>
            <!-- This is an empty div so there can be an empty space below the send button -->
        </div>
    </div>
    <div id="joinbox">
        <div style="color: #e5e0e5; text-align: center;">Please enter your name<br />to join the chat</div>
        <div>
            <input id="name" type="text" maxlength="36">
            <input id="join" type="button" class="button pretty-button" onclick="join();" value="Join" />
            {{if .Video}}
            <div style="display: flex; flex-direction: column; align-items: center;">
                <a href="/chat">Chat Only</a>
                <a href="/video">Video Only</a>
                <a href="/video" onclick="window.open('/chat', '_blank');">Both Separatly</a>
            </div>
            {{end}}
        </div>
    </div>
</div>
{{end}}
{{end}}