{% extends "base.html" %}
{% block content %}
<div class="container">
    <h1 class="my-4">AI Reflection</h1>
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">This week's question:</h5>
                    <p class="card-text">{{ question }}</p>
                    <form method="post">
                        {% csrf_token %}
                        <input type="hidden" name="question" value="{{ question }}">
                        {{ form.as_p }}
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Previous Reflections</h5>
                    <ul class="list-group list-group-flush">
                        {% for reflection in reflections %}
                        <li class="list-group-item">
                            <strong>{{ reflection.question }}</strong><br>
                            {{ reflection.answer }}<br>
                            {% if reflection.feedback %}
                            <strong>Feedback:</strong><br>
                            <p class="text-muted">{{ reflection.feedback }}</p>
                            {% endif %}
                            <small class="text-muted">{{ reflection.created_at|date:"F d, Y" }}</small>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
