{% extends 'base.html' %}

{% block content %}
<div class="container text-center">
<div class="container">
    <h2>{{destinations.first.destination}}</h2>
</div>

<h2><p class="fa fa-arrow-down" style="color:grey;"></p></h2>
<div class="container">
    <h3><p id="shorten">{{request.META.HTTP_HOST}}/{{slug.slug}}</p></h3>
</div>
<button type="button" onclick="copy()" class="btn btn-dark">COPY <i class="fa fa-copy"></i></button>
</div>

<script>
function copy(){
    // code from:
    // https://actualwizard.com/how-to-copy-text-to-the-clipboard-with-html-and-javascript
     var textToCopy = document.getElementById("shorten");
     var currentRange;
     if(document.getSelection().rangeCount > 0)
     {
          currentRange = document.getSelection().getRangeAt(0);
          window.getSelection().removeRange(currentRange);
     }
     else
     {
          currentRange = false;
     }

     var CopyRange = document.createRange();
     CopyRange.selectNode(textToCopy);
     window.getSelection().addRange(CopyRange);
     document.execCommand("copy");

     //remove our selection range
     window.getSelection().removeRange(CopyRange);

     //return the old selection range
     if(currentRange)
     {
          window.getSelection().addRange(currentRange);
     }
}
</script>

{% endblock %}