{% extends "base.html" %}

{% block title %}Chat - MyOrg Assistant{% endblock %}

{% block content %}
<div class="chat-container">
    <h2>💬 Chat with Assistant</h2>
    
    <div class="chat-messages" id="messages">
        <div class="message assistant">
            <strong>Assistant:</strong> Hi! I'm your MyOrg assistant. Ask me anything about your tasks, calendar, or projects!
        </div>
    </div>
    
    <form class="chat-form" hx-post="/api/chat" hx-target="#messages" hx-swap="beforeend" hx-on::after-request="this.reset()">
        <input type="text" name="message" placeholder="Type your message..." required autofocus>
        <button type="submit">Send</button>
    </form>
    
    <button hx-post="/api/chat/reset" hx-swap="none" class="btn-secondary">Clear History</button>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// Auto-scroll to bottom when new messages arrive
htmx.on('htmx:afterSwap', function(evt) {
    var messages = document.getElementById('messages');
    messages.scrollTop = messages.scrollHeight;
});
</script>
{% endblock %}