{% extends 'base.html' %}

{% block title %}Link para escolha dos Números{% endblock %}
{% block content %}
<div class="input-group mb-3">
  <input type="text" id="purchase-link" value="{{ link }}" class="form-control" readonly>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="copy-button">Copiar</button>
    <a class="btn btn-outline-secondary" href="{{ link }}" target="_blank">Abrir</a>
  </div>
</div>

<a href="/venda">Voltar</a>

<script>
    document.querySelector("#copy-button").addEventListener("click", function() {
        // Select the text field
        var copyText = document.querySelector("#purchase-link");
        copyText.select();
        // For mobile devices
        copyText.setSelectionRange(0, 99999);

        // Copy the text inside the text field
        document.execCommand("copy");

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

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