<div class="content-section" style="padding: 0px">
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Intent Ranking</h5>
    <hr>
    {% for intent, confidence in intents.items %}
      {{ intent }}
      <div class="progress mb-2">
          <div class="progress-bar" role="progressbar" style="width: {{ confidence }}%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{ confidence }}%</div>
      </div>
    {% endfor %}
  </div>
</div>

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Replies</h5>
    <hr>
        {% for key, data in replies.items %}
        <div class="card">
          <h5 class="card-header">{{key}}</h5>
          <div class="card-body" style="padding: 1px">
            <ul class="list-group list-group-item-action">
                {% for reply in data %}
                  <li class="list-group-item" style="font-size: 14px" ><p>{{ reply.reply }}</p></li>
                {% endfor %}
            </ul>
        </div>
      {% endfor %}
      </div>
  </div>
</div>
</div>