<div class="card">
    <h3 class="text-lg font-semibold text-gray-900 mb-4">Add a Reply</h3>
    <form hx-post="{{ url_for('forum_add_reply', category_slug=topic.category.slug, topic_id=topic.id) }}"
          hx-target="#replies-list"
          hx-swap="beforeend"
          hx-on::after-request="if(event.detail.successful) this.reset()">
        <div class="mb-4">
            <textarea name="content" rows="4" required
                      class="input resize-none"
                      placeholder="Write your reply..."></textarea>
        </div>
        <div class="flex justify-end">
            <button type="submit" class="btn btn-primary">
                <span class="htmx-indicator mr-2">
                    <svg class="animate-spin h-4 w-4 inline" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                </span>
                Post Reply
            </button>
        </div>
    </form>
</div>
