<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>


<!-- Copy to Clipboard by Pabon Starts -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script>

  var len = $('.list-group-item').length;

  for(let i = 0 ; i < len ; i++){
    // $('.list-group-item')[i].id = i+1;
    $('.list-group-item')[i].firstChild.id = i+1;
    // console.log($('.list-group-item')[i].firstChild.id);
  }

  $(document).on('click', '.list-group-item', (e) => {
    // console.log("CLicked");

    var id = $(e.target).closest('.list-group-item').find('p')[0].id;

    // console.log(id);

    var text = document.getElementById(id).textContent;
    $.toast({
      heading: 'Copied to Clipboard!',
      text: text,
      icon: 'success',
      position: 'top-right',
      stack: false
    });

    // console.log(document.getElementById(id).textContent);

    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();

    document.execCommand("copy");
    document.body.removeChild(dummy);
  })

</script>

<!-- Copy to Clipboard by Pabon Ends -->