{% extends "base.html" %}

{% block title %}Eurus - Climate Data Analysis{% endblock %}

{% block content %}
<div class="chat-container">
    <!-- API Keys panel — hidden when keys are pre-configured via env -->
    <div id="api-keys-panel" class="api-keys-panel" style="display: none;">
        <div class="api-keys-header">
            <span>API Keys Required</span>
        </div>
        <div class="api-keys-body">
            <p class="api-keys-note">Enter your API keys to use Eurus. Keys are kept in your browser session only —
                they are cleared when you close the browser.</p>
            <div class="api-key-field">
                <label for="openai-key">OpenAI API Key <span class="required">*</span></label>
                <input type="password" id="openai-key" placeholder="sk-..." autocomplete="off">
            </div>
            <div class="api-key-field">
                <label for="arraylake-key">Arraylake API Key</label>
                <input type="password" id="arraylake-key" placeholder="ema_..." autocomplete="off">
            </div>
            <button id="save-keys-btn" class="save-keys-btn">Connect</button>
        </div>
    </div>

    <div id="chat-messages" class="chat-messages">
        <div class="message system-message">
            <h3>Welcome to Eurus</h3>
            <p>I can help you analyze ERA5 climate data. Try:</p>
            <ul>
                <li>"Show me SST for California coast, Jan 2024"</li>
                <li>"Plot temperature in the Gulf of Mexico"</li>
            </ul>
            <p style="margin-top: 10px; font-size: 0.85em; opacity: 0.7;">
                ⚠️ <strong>Experimental</strong> — This is a research prototype. Please avoid requesting very large
                datasets
                (e.g., global multi-year downloads), especially via this HF Space. For heavy workloads, use the
                📦 Arraylake Code buttons to access data directly.
            </p>
        </div>
    </div>

    <div class="chat-input-container">
        <form id="chat-form" class="chat-form">
            <textarea id="message-input" placeholder="Ask about climate data..." rows="1"></textarea>
            <button type="submit" id="send-btn" disabled>Send</button>
        </form>
        <div class="input-hints">
            <kbd>Enter</kbd> to send, <kbd>Shift+Enter</kbd> for new line
        </div>
    </div>
</div>

<dialog id="cache-modal">
    <article>
        <header>
            <h3>Cached Datasets</h3>
            <button class="close-modal">&times;</button>
        </header>
        <div id="cache-content">
            <p>Loading...</p>
        </div>
    </article>
</dialog>
{% endblock %}

{% block scripts %}
<script src="/static/js/chat.js?v=20260219b"></script>
{% endblock %}