<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ollama Web UI</title>
    <!-- Add Prism.js for better code highlighting -->
    <link rel="stylesheet" href="/static/prism.css">
    <script src="/static/prism.js"></script>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="app">
        <!-- Sidebar -->
        <aside class="sidebar">
            <button id="new-chat" class="new-chat">+ New Chat</button>
            <div class="conversations-list" id="conversations-list">
                <!-- populated by js -->
            </div>
            <button id="delete-all-btn" class="delete-all-btn">
                <svg viewBox="0 0 24 24" width="16" height="16">
                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
                </svg>
                Delete All Chats
            </button>
        </aside>

        <!-- Main panel -->
        <main class="main">
            <!-- Top bar -->
            <header class="top-bar">
                <select id="model-select" class="model-select"></select>
                <div class="param-control">
                    <label>Temp <span id="temp-value">0.7</span></label>
                    <input type="range" id="temperature" min="0" max="2" step="0.1" value="0.7">
                </div>
                <div class="param-control">
                    <label>Top-p <span id="topp-value">0.9</span></label>
                    <input type="range" id="top-p" min="0" max="1" step="0.05" value="0.9">
                </div>
                <div class="param-control">
                    <label>Max tokens</label>
                    <select id="max-tokens" class="token-select">
                        <option value="2048">2K</option>
                        <option value="4096">4K</option>
                        <option value="8192">8K</option>
                        <option value="32768">32K</option>
                        <option value="65536">64K</option>
                        <option value="131072">128K</option>
                        <option value="262144">256K</option>
                        <option value="524288">512K</option>
                    </select>
                </div>
                <button id="system-prompt-btn">System</button>
                <button id="upload-btn">📎</button>
            </header>

            <!-- Chat messages area -->
            <div class="chat-area" id="chat-area">
                <div class="messages" id="messages"></div>
            </div>

            <!-- Input area -->
            <div class="input-area" id="input-area">
                <textarea id="user-input" placeholder="Type your message... (Shift+Enter for new line)" rows="1"></textarea>
                <button id="send-btn" class="send-btn">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                    </svg>
                </button>
            </div>
        </main>
    </div>

    <!-- System prompt modal -->
    <div id="system-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h3>System Prompt</h3>
            <textarea id="system-prompt-text" rows="6" placeholder="Enter system prompt..."></textarea>
            <button id="save-system">Save</button>
        </div>
    </div>

    <!-- Upload preview modal -->
    <div id="upload-modal" class="modal">
        <div class="modal-content">
            <span class="close-upload">&times;</span>
            <h3>Upload Files</h3>
            <div id="drop-zone" class="drop-zone">Drag & drop files here or click to select</div>
            <input type="file" id="file-input" multiple style="display:none;">
            <div id="file-previews" class="file-previews"></div>
        </div>
    </div>

    <script src="/static/app.js"></script>
</body>
</html>