<div class="mx-auto mb-6">
  <div class="card bg-base-200 shadow">
    <div class="card-body">
      <h2 class="card-title">Result</h2>
      <div class="prose !max-w-none">
        {{ answer_content | safe}}
      </div>
      {% if answer_references %}
      <div class="mt-4">
        <h2 class="card-title mb-2">References</h2>
        <div class="flex flex-wrap gap-2 max-w-full">
          {% for ref in answer_references %}
          <div class="tooltip" data-tip="More info about {{ ref }}">
            <button class="badge truncate badge-outline cursor-pointer text-gray-500 hover:text-gray-700">
              {{ ref }}
            </button>
          </div>
          {% endfor %}
        </div>
      </div>{% endif %}
      <div class="mt-4">
        <form hx-post="/chat" hx-target="body" hx-swap="outerHTML" method="POST" class="flex items-center space-x-4">
          <input type="hidden" name="user_query" value="{{ user_query }}">
          <input type="hidden" name="llm_response" value="{{ answer_content }}">
          <input type="hidden" name="references" value="{{ answer_references }}">
          <button type="submit" class="btn btn-primary">Continue with chat</button>
        </form>
      </div>
    </div>
  </div>
</div>