{% extends 'layout.html' %}

{% block body %}
<h1>Link gekuerzt!</h1>
<div class="result-box">
    <p>Ihr gekuerzter Link: <a id="short-link" href="/{{ code }}">/{{ code }}</a>
       <button class="copy-btn" onclick="copyLink()">Kopieren</button>
    </p>
    <p>Ziel: {{ url }}</p>
</div>
<a href="/">Weiteren Link kuerzen</a>

<script>
function copyLink() {
    var link = document.getElementById("short-link");
    var btn = document.querySelector(".copy-btn");
    navigator.clipboard.writeText(window.location.origin + link.getAttribute("href")).then(function() {
        btn.textContent = "Kopiert!";
        setTimeout(function() { btn.textContent = "Kopieren"; }, 2000);
    }).catch(function() {
        btn.textContent = "Fehler!";
        setTimeout(function() { btn.textContent = "Kopieren"; }, 2000);
    });
}
</script>
{% endblock %}