<div class="echo-response mb-3">
  <div class="accordion" id="accordionEcho">
    <div class="accordion-item">
      <h2 class="accordion-header" id="promptHeading">
        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePrompt" aria-expanded="false" aria-controls="collapsePrompt">
          <i class="fa-solid <%= @prompt.icon %> me-2"></i> <%= @prompt.title %> Prompt
        </button>
      </h2>
      <div id="collapsePrompt" class="accordion-collapse collapse" aria-labelledby="promptHeading" data-bs-parent="#accordionEcho">
        <div id="prompt_content" class="accordion-body">
          <div class="echo-content"><%= @prompt_content %></div>
        </div>
      </div>
    </div>

    <div class="accordion-item">
      <h2 class="accordion-header" id="responseHeading">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse" aria-expanded="true" aria-controls="collapseResponse">
          <i class="fa-solid fa-wifi me-2"></i>Echo Response
        </button>
      </h2>
      <div id="collapseResponse" class="accordion-collapse" aria-labelledby="responseHeading" data-bs-parent="#accordionEcho">
        <%# Keep the spinner div on the same line as its container: .echo-content uses
            white-space: break-spaces, so a whitespace text node left behind after the
            spinner is removed would render as a visible blank line before the response. %>
        <div id="<%= @response_id %>" class="accordion-body echo-content"><div id="<%= "#{@response_id}_spinner" %>"><%= spinner_tag %></div></div>
      </div>
    </div>
  </div>
</div>
