{% extends "base.html" %}

{% block content %}
<h2>{{ question.content }}</h2>

<h3>Comments</h3>
<ul>
    {% for comment in question.comments %}
    <li>
        <p><strong>{{ comment.username }}</strong></p>
        {% if comment.audio_file %}
        <audio controls>
            <source src="{{ url_for('static', filename='audio/' ~ comment.audio_file) }}" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        {% endif %}
        <p>{{ comment.text_reply }}</p>
    </li>
    {% endfor %}
</ul>

<h3>Add a Comment</h3>
<form action="{{ url_for('question', question_id=question.id) }}" method="post" enctype="multipart/form-data">
    <input type="text" name="username" placeholder="Your name" required><br>
    <textarea name="text_reply" placeholder="Your comment"></textarea><br>
    <input type="file" name="audio" accept="audio/*"><br>
    <button type="submit">Submit</button>
</form>
{% endblock %}