{% extends 'base.html' %}
{% block title %}prompts by label{% endblock title %}

{% block content %}
  <h1 class="title">Prompts with label: {{ label.name }}</h1>
  <div class="columns is-multiline">
    {% for prompt in prompts %}
      <div class="column is-one-third">
        <div class="box">
          <div class="content">
            <p>{{ prompt.text|truncatechars:250 }} <span class="tag is-light">Length: {{ prompt.text|length }} chars...</span></p>
          </div>
          <button class="button is-small" data-clipboard-text="{{ prompt.text }}">
            <span class="icon">
              <i class="fas fa-copy"></i>
            </span>
          </button>
        </div>
      </div>
    {% endfor %}
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
  <script>
    new ClipboardJS('.button');
  </script>
{% endblock %}