<!DOCTYPE html>
<html>
{% include 'head.html' %}
<body>
    <script>
    window.sigmundSettings = {{ settings | safe }}
    </script>
    <script>{% include 'main.js' %}</script>
    <div id="container">
        <div id="chat-area">
            {% include 'header.html' %}
            <div id="sign-out">Welcome {{ username }}!
                <button title="Menu" id="expand" onclick="app.__vue__.toggleMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
            {% include 'menu.html' %}    
            <div id="response">{{ message_history | safe }}</div>
            <div id="loading-message"></div>
            <div id="message-box">
                <div id="message-container">
                    <textarea id="message" placeholder="Enter your message"></textarea>
                    <div id="button-container">
                        <button title="Send" id="send" disabled><i class="fas fa-paper-plane"></i></button>
                        <button title="Cancel" id="cancel"><i class="fas fa-stop-circle"></i></button>
                        <button title="Show menu" id="expand" onclick="app.__vue__.toggleMenu()"><i class="fas fa-bars"></i></button>
                        <button title="Expand message box" id="expand" onclick="expandMessageBox()"><i class="fas fa-expand"></i></button>
                    </div>
                </div>
            </div>
            <div id="message-counter" style="text-align: right;"></div>
            {% include 'footer.html' %}
        </div>
        <div id="code-editor">
            <div id="code-editor-options">
                <select id="workspace-language">
                  <option value="css">CSS</option>
                  <option value="html">HTML</option>
                  <option value="javascript">JavaScript</option>
                  <option value="opensesame">OpenSesame script</option>
                  <option value="python">Python</option>
                  <option value="r">R</option>
                  <option value="markdown" selected>Text (Markdown)</option>
                </select>
                <button id="clear-workspace" title="Clear"><i class="fas fa-eraser"></i></button>
                <button id="copy-workspace" title="Clear"><i class="fas fa-copy"></i></button>
                <!-- button id="hide-workspace" title="Hide"><i class="fas fa-eye-slash"></i></button -->
            </div>
            <textarea id="workspace" data-mode="{{ workspace_language }}">{{ workspace_content }}</textarea>
            <div id="workspace-placeholder">Use this workspace to share text and code</div>
        </div>        
    </div>
    <script>    
    // Show menu on new discussion
    if (document.getElementById('response').children.length < 2) {
        app.__vue__.toggleMenu()
    }
    </script>
</body>
</html>
