<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <!-- Favicon (emoji as fallback, but you can add a real favicon) -->
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦙</text></svg>">
    <title>mallama · AI</title>
    <!-- Font Awesome 6 (free) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Markdown renderer + syntax highlighting -->
    <script src="../static/marked.min.js"></script>
    <link rel="stylesheet" href="../static/atom-one-dark.min.css">
    <script src="../static/highlight.min.js"></script>
    <link rel="stylesheet" href="../static/style.css">
</head>
<body>
<div class="app-container">
    <!-- LEFT SIDEBAR -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-content">
            <div class="new-chat-btn" id="newChatBtn">
                <i class="fas fa-pen-to-square"></i> New chat
            </div>
            <div class="history-list" id="historyList">
                <!-- dynamic chat items go here -->
            </div>
            <div class="sidebar-footer">
                <div class="footer-btn" id="settingsBtn">
                    <i class="fas fa-sliders-h"></i> Settings
                </div>
                <div class="footer-btn" id="deleteAllBtn">
                    <i class="fas fa-trash-alt"></i> Delete all chats
                </div>
            </div>
        </div>
    </aside>

    <!-- MAIN CHAT PANEL -->
    <div class="main-panel">
        <div class="top-bar">
            <div class="burger" id="burgerBtn"><i class="fas fa-bars"></i></div>
            <select class="model-selector" id="modelSelect"></select>
        </div>

        <div class="messages-container" id="messagesContainer">
            <!-- messages appear here -->
        </div>

        <!-- bottom bar -->
        <div class="input-area">
            <div class="input-wrapper">
                <textarea class="message-input" id="messageInput" rows="1" placeholder="Message mallama..."></textarea>
                <label for="fileUpload" class="action-btn attach-btn" style="margin-right: 4px;"><i class="fas fa-paperclip"></i></label>
                <input type="file" id="fileUpload" style="display: none;" multiple>
            </div>
            <div class="action-btn" id="sendStopBtn">
                <i class="fas fa-paper-plane" id="sendIcon"></i>
                <i class="fas fa-stop" id="stopIcon" style="display: none;"></i>
            </div>
        </div>
    </div>
</div>

<!-- SETTINGS MODAL -->
<div class="modal-overlay" id="settingsModal">
    <div class="settings-modal">
        <h2><i class="fas fa-sliders-h"></i> Parameters</h2>
        <div class="setting-row">
            <label>System prompt</label>
            <textarea id="systemPrompt" rows="3" placeholder="You are a helpful assistant..."></textarea>
        </div>
        <div class="setting-row">
            <label>Temperature (<span id="tempValue">0.7</span>)</label>
            <input type="range" id="temperature" step="0.1" min="0" max="2" value="0.7">
        </div>
        <div class="setting-row">
            <label>Top P (<span id="topPValue">0.9</span>)</label>
            <input type="range" id="topP" step="0.05" min="0" max="1" value="0.9">
        </div>
        <div class="setting-row">
            <label>Max tokens</label>
            <select id="maxTokens">
                <option value="2048" selected>2k</option>
                <option value="4096">4k</option>
                <option value="8192">8k</option>
                <option value="16384">16k</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 class="modal-close" id="closeSettingsBtn">Done</button>
    </div>
</div>

<!-- UPLOAD MODAL (hidden by default, can be shown via attach) -->
<div class="modal-overlay" id="uploadModal">
    <div class="settings-modal" style="width: 500px;">
        <h2><i class="fas fa-upload"></i> Upload files</h2>
        <div class="setting-row">
            <div id="dropZone" style="border:2px dashed rgba(255,255,255,0.2); border-radius:30px; padding:40px; text-align:center; cursor:pointer;">
                <i class="fas fa-cloud-upload-alt" style="font-size:2rem; margin-bottom:10px;"></i>
                <p>Drag files here or click to browse</p>
            </div>
            <input type="file" id="fileInput" multiple style="display: none;">
        </div>
        <div id="filePreviews"></div>
        <button class="modal-close" id="closeUploadBtn" style="margin-top:20px;">Done</button>
    </div>
</div>

<!-- Custom Popup -->
<div class="custom-popup-overlay" id="customPopupOverlay">
    <div class="custom-popup">
        <p id="popupMessage">Are you sure?</p>
        <div class="popup-buttons">
            <button class="popup-btn cancel" id="popupCancel">Cancel</button>
            <button class="popup-btn confirm" id="popupConfirm">Delete</button>
        </div>
    </div>
</div>

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