{{define "content"}}
<section class="container">
  <div class="columns">
    <div class="column">
       <p class="text-ellipsis text-secondary">Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
       <p class="text-ellipsis text-secondary">Your full url is: <a href="{{.Ori}}">{{.Ori}}</a></p>
       <div class="form-group input-group">
         <input class="form-input text-ellipsis" id="input-url" value="{{.URL}}" readonly />
         <button class="btn btn-primary hide" id="btn-copy" data-clipboard-target="#input-url">Copy</button>
         <a class="btn btn-action" href="/e/{{.ID}}">
          <i class="icon icon-edit">Edit</i>
        </a>
       </div>
    </div>
  </div>
</section>
{{end}}
{{define "scripts"}}
<script src="/js/jquery.min.js"></script>
<script src="/js/clipboard.min.js"></script>
<script>
$(document).ready(function() {
  var clipboard = new Clipboard('.btn');

  var displayTooltip = function(element, text, timeout) {
    $(element).addClass("tooltip tooltip-bottom");
    $(element).attr("data-tooltip", text);
    setTimeout(function () {
      $(element).removeClass("tooltip tooltip-bottom");
      $(element).removeAttr("data-tooltip");
    }, timeout || 3000);
  };

  var padShortURL = function() {
    var domain = window.location.origin;
    var short = $("#input-url").val().replace(domain, "");
    $("#input-url").val(domain + short);
  };

  clipboard.on("success", function(e) {
    e.clearSelection();
    displayTooltip("#btn-copy", "Copied!");
  });

  clipboard.on('error', function(e) {
    displayTooltip("#btn-copy", "Error!");
  });

  $("#btn-copy").removeClass("hide");

  padShortURL();
});
</script>
{{end}}