{% extends 'base.html' %}

{% block content %}
<h2>Tabela de Links:</h2>
<a href="/venda">Adicionar</a>
<table class="table">
  <thead>
    <tr>
      <th scope="col">Obs</th>
      <th scope="col">Números</th>
      <th scope="col">Ações</th>
    </tr>
  </thead>
  <tbody>
    {% for purchase in purchases %}
    <tr>
      <td>{{ purchase.remarks }}</td>
      <td>{{ purchase.total_numbers }}</td>
      <td>
        <div class="btn-group" role="group">
          <a class="btn btn-primary" href="/numeros/{{ purchase.id }}" target="_blank">Abrir</a>
          <button class="btn btn-secondary copy-button" data-link="/numeros/{{ purchase.id }}">Copiar</button>
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script>
    document.querySelectorAll(".copy-button").forEach(function(button) {
        button.addEventListener("click", function() {
            var link = this.dataset.link;
            navigator.clipboard.writeText(link);

            // Change button text to "Copied!"
            this.textContent = "Copiado!";

            // Change it back after 2 seconds
            var copyButton = this;
            setTimeout(function() {
                copyButton.textContent = "Copiar";
            }, 2000);
        });
    });
</script>
{% endblock %}