<!DOCTYPE html>
<html>
{% include 'head.html' %}
<body>
    <script>
    window.sigmundSettings = {{ settings | safe }}
    </script>
    <script>
        {% include 'global_elements.js' %}
        {% include 'workspace.js' %}
        {% if not need_login %}
            {% include 'websocket_client.js' %}
            {% include 'health.js' %}            
        {% endif %}
        {% include 'main.js' %}
    </script>
    <div id="container">
        <div id="chat-area">
            <div id="usage-limit-warning">
                You have reached your weekly usage limit. This is a soft limit, which means that you can continue to use Sigmund. However, we kindly ask you to review <a href="/fair-use">this information on our fair-use policy</a>.
            </div>        
            {% 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>

            <!-- Attachments list -->
            <div id="attachment-list" style="margin-bottom: 10px;"></div>

            <div id="message-box">
                <div id="message-container">
                    <textarea id="message" placeholder="Enter your message"></textarea>

                    <!-- Hidden file input -->
                    <input 
                        type="file" 
                        id="attachment-input" 
                        style="display: none;" 
                        multiple 
                        accept=".pdf,.doc,.docx,.png,.jpg"
                    >

                    <div id="button-container">
                        <button 
                            title="Attach" 
                            id="attach" 
                            onclick="document.getElementById('attachment-input').click();"
                        >
                            <i class="fas fa-paperclip"></i>
                        </button>
                        <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>
            <!-- Usage progress bar: data-usage should be a number 0-1 -->
            <div id="usage-counter" data-usage="{{ usage }}">
                <div id="usage-bar"></div>
                <div id="usage-label"></div>
            </div>
            <div id="message-counter" style="text-align: right;"></div>
            {% include 'footer.html' %}
        </div>

        <div id="code-editor">
            <div id="connected-status"><i class="fas fa-plug"></i> Connected to OpenSesame</div>
            <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>
            </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>
    {% if need_login %}
    app.__vue__.toggleMenu()
    {% else %}
    // Show menu on new discussion
    if (document.getElementById('response').children.length < 2) {
        app.__vue__.toggleMenu()
    }
    {% endif %}
    {% include 'attachments.js' %}
    </script>
</body>
</html>