{% extends "base.html" %}

{% block title %}Guided Setup - PairCoder Setup{% endblock %}

{% block content %}
<section class="chat-page">
    <h2>Guided Setup</h2>
    <p class="chat-subtitle">Describe your project and I'll configure PairCoder for you.</p>

    <div id="chat-messages" class="chat-messages">
        <div class="chat-message assistant">
            <div class="chat-avatar">PC</div>
            <div class="chat-bubble assistant">
                Describe what you're building. What problem are you solving?
            </div>
        </div>

        <div id="typing-indicator" class="chat-message assistant typing-indicator hidden">
            <div class="chat-avatar">PC</div>
            <div class="chat-bubble assistant">
                <span class="typing-dots">
                    <span></span><span></span><span></span>
                </span>
            </div>
        </div>
    </div>

    <div id="quick-replies" class="quick-replies">
        <button class="quick-reply-btn" data-reply="Web application">Web app</button>
        <button class="quick-reply-btn" data-reply="Mobile application">Mobile app</button>
        <button class="quick-reply-btn" data-reply="CLI tool">CLI tool</button>
        <button class="quick-reply-btn" data-reply="I'm not sure yet">Not sure</button>
    </div>

    <div id="chat-actions" class="chat-actions hidden">
        <button id="btn-create" class="btn btn-primary">Create it!</button>
        <button id="btn-customize" class="btn btn-secondary">Customize</button>
        <button id="btn-start-over" class="btn btn-outline">Start over</button>
    </div>

    <div class="chat-input-area">
        <textarea
            id="chat-input"
            class="chat-input"
            placeholder="Type your message..."
            rows="1"
        ></textarea>
        <button id="chat-send" class="btn btn-primary chat-send-btn">Send</button>
    </div>
</section>

<script src="/static/chat.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var chatUI = new ChatUI({
            messagesContainer: document.getElementById('chat-messages'),
            inputField: document.getElementById('chat-input'),
            sendButton: document.getElementById('chat-send'),
            typingIndicator: document.getElementById('typing-indicator'),
            quickReplies: document.getElementById('quick-replies'),
            actionsContainer: document.getElementById('chat-actions'),
            createButton: document.getElementById('btn-create'),
            customizeButton: document.getElementById('btn-customize'),
            startOverButton: document.getElementById('btn-start-over'),
        });
    });
</script>
{% endblock %}