{% extends 'base.html' %}
{% load static %}

{% block title %}
AI Chatbot
{% endblock %}

{% block content %}
<div class="hero">
    <div class="container">
        <h1>AI Powered Customer Support</h1>
        <p class="lead">Our AI chatbot is here to help you 24/7 with your questions and complaints.</p>
        <a href="#chat" class="btn btn-lg btn-light">Start a Conversation</a>
    </div>
</div>

<div id="chat" class="chat-widget">
    <div class="chat-history">
        {% for msg in messages %}
            <div class="chat-message {% if msg.sender == 'user' %}user-message{% else %}bot-message{% endif %}">
                <div class="message-bubble">
                    {{ msg.message }}
                </div>
            </div>
        {% endfor %}
    </div>
    <div class="chat-input">
        <form method="post">
            {% csrf_token %}
            <div class="input-group">
                <input type="text" name="message" class="form-control" placeholder="Type your message...">
                <button type="submit" class="btn btn-primary">Send</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}
