<!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="{{url_for('static', filename='context.css')}}" rel="stylesheet" />
        <link href="{{url_for('static', filename='sidebar.css')}}" rel="stylesheet" />
        <style>
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }

            body {
                font-family: Arial, sans-serif;
                line-height: 1.6;
            }

            .main-content {
                flex: 1;
                padding-left: 200px;
                padding-right: 100px;
                padding-top: 10px;
                padding-bottom: 10px;
                margin-left: 0;
                overflow-y: auto;
            }

            .context-grid {
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 20px;
                max-width: 1200px;
                margin: 0 auto;
            }

            .context-card {
                display: block;
                justify-content: space-between;
                align-items: center;
                padding: 15px;
                background-color: #f8f9fa;
                border: 1px solid #dee2e6;
                border-radius: 4px;
                cursor: pointer;
                transition: all 0.2s ease;
                pointer-events: auto;
            }

            .context-card:hover {
                background-color: #e9ecef;
                transform: translateY(-2px);
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }

            .context-card {
                position: relative;
            }

            .context-info {
                cursor: pointer;
                margin-bottom: 20px;
            }

            .context-actions {
                display: flex;
                align-items: center;
                gap: 15px;
                position: absolute;
                top: 15px;
                right: 15px;
            }

            .context-delete-button {
                display: none;
                background-color: #dc3545;
                color: white;
                border: none;
                border-radius: 3px;
                padding: 4px 8px;
                font-size: 0.8em;
                cursor: pointer;
                height: fit-content;
                line-height: 1;
                pointer-events: auto;
            }

            .context-delete-button:hover {
                background-color: #c82333;
            }

            .context-card:hover .context-delete-button {
                display: block;
            }

            .context-info {
                flex: 1;
            }

            .context-header {
                display: flex;
                align-items: baseline;
                gap: 10px;
                margin-bottom: 5px;
                justify-content: space-between;
            }

            .context-id-name {
                display: flex;
                align-items: baseline;
                gap: 10px;
            }

            .context-name {
                font-weight: bold;
                font-size: 1.1em;
            }

            .context-id {
                color: #666;
                font-size: 0.9em;
            }

            .context-title {
                color: #444;
                font-size: 0.95em;
            }

            .context-time {
                color: #666;
                font-size: 0.85em;
                white-space: nowrap;
                margin-left: auto;
                position: absolute;
                bottom: 15px;
                right: 15px;
            }

            .page-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 20px;
                background-color: #f8f9fa;
                border-bottom: 1px solid #dee2e6;
            }

            .header-title {
                font-size: 1.5em;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="container">
            {% include 'sidebar.html' %}
            <div class="main-content">
                <div class="messages-container">
                    <div class="context-grid">
                        {% for chat in chats %}
                        <div class="context-card" onclick="window.location.href='/context/{{ chat.context_id }}'">
                            <div class="context-info">
                                <div class="context-header">
                                    <div class="context-id-name">
                                        <span class="context-id">#{{ chat.context_id }}</span>
                                        <span class="context-name">{{ chat.name }}</span>
                                    </div>
                                </div>
                                <div class="context-title">{{ chat.title }}</div>
                            </div>
                            <div class="context-actions">
                                <button 
                                    class="context-delete-button" 
                                    onclick="event.stopPropagation(); deleteContext('{{ chat.context_id }}')"
                                    title="Delete chat"
                                >×</button>
                            </div>
                            <div class="context-time">{{ chat.update_time }}</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="input-container">
                    <div class="model-display">
                        Model: {{ model }}
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                observer.observe(document.querySelector('.main-content'), {
                    childList: true,
                    subtree: true
                });
            });
        </script>
        <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="{{ url_for('static', filename='sidebar.js') }}"></script>
    </body>
</html>
