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

{% block title %}Mood Music AI{% endblock %}

{% block content %}
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

<div class="container-fluid hero-section">
    <div class="text-center">
        <h1 class="hero-title">Find Your Vibe</h1>
        <p class="hero-subtitle">Let our AI create the perfect playlist to match your mood.</p>
    </div>

    <div class="chat-container">
        <div class="chat-box" id="chat-box">
            {% if conversation %}
                {% for message in conversation %}
                    <div class="chat-message {% if message.role == 'user' %}user-message{% else %}ai-message{% endif %}">
                        <p>{{ message.content }}</p>
                    </div>
                {% endfor %}
            {% else %}
                <div class="chat-message ai-message">
                    <p>{{ ai_message }}</p>
                </div>
            {% endif %}
        </div>
        <form method="post" class="chat-input-form">
            {% csrf_token %}
            <input type="text" name="message" class="chat-input" placeholder="Tell me about your day..." required>
            <button type="submit" class="send-button">Send</button>
        </form>
    </div>
</div>
{% endblock %}
