<!DOCTYPE html>
<html lang="en">
    <title>Haillo</title>
    <head>
        <meta name="description" content="Haillo, the hai WebUI">
        <meta name="theme-color" content="#317EFB"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="{{url_for('static', filename='icons/icon_144x144.png')}}" type="image/png">
        <link rel="icon" href="{{url_for('static', filename='icons/icon_192x192.png')}}" type="image/png">
        <link rel="icon" href="{{url_for('static', filename='icons/icon_512x512.png')}}" type="image/png">
        <link rel="apple-touch-icon" href="{{url_for('static', filename='icons/icon_144x144.png')}}" type="image/png">
        <link rel="apple-touch-icon" href="{{url_for('static', filename='icons/icon_192x192.png')}}" type="image/png">
        <link rel="apple-touch-icon" href="{{url_for('static', filename='icons/icon_512x512.png')}}" type="image/png">
        <link rel="manifest" href="/manifest.json">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />
        <link href="{{url_for('static', filename='context.css')}}" rel="stylesheet" />
        <link href="{{url_for('static', filename='sidebar.css')}}" rel="stylesheet" />
    </head>
    <body onload='document.querySelector(".chat-input").focus();'>
        <div class="container">
            {% include 'sidebar.html' %}
            <div class="main-content">
                <div class="messages-container">
                    {% if messages %}
                        {% for message in messages %}
                            {% if message.content %}
                            <div class="message {{ message.role }}">
                                <div class="message-role">{{ message.role }}</div>
                                <div class="message-content">{{ message.content }}</div>
                            </div>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <div>No messages to display</div>
                    {% endif %}
                    <div class="loading-indicator" style="display: none;">
                        <div class="dots">
                            <div class="dot"></div>
                            <div class="dot"></div>
                            <div class="dot"></div>
                        </div>
                    </div>
                </div>
                <div class="input-container">
                    <form action="/chat" method="POST" id="chat-form">
                        <div class="input-wrapper">
                            <textarea
                                name="message"
                                class="chat-input"
                                placeholder=""
                                required
                                maxlength="2000000"
                                ></textarea>
                            </textarea>
                            <button type="submit" class="send-button">Send</button>
                            <button
                                type="button"
                                class="vibe-button"
                                id="vibe-toggle-button"
                                onclick="toggleVibe()"
                                data-state="vibe"
                                title="Toggle vibing"
                            >Vibe</button>
                        </div>
                        <div class="model-display">
                            Model: {{ model }}
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            window.onload = function() {
                let message = "{{ popup_message|escape if popup_message else '' }}";
                if (message) {
                    alert(message); // JS alert overlay

                    // Clean up URL without reloading
                    window.history.replaceState({}, document.title, window.location.pathname);
                }
            };
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-yaml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markdown.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
        <script src="{{ url_for('static', filename='context.js') }}"></script>
        <script src="{{ url_for('static', filename='sidebar.js') }}"></script>
    </body>
</html>
