{{define "content"}}
<section class="container">
  <div class="columns">
    <div class="column">
      <p>Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
      <form class="mt-10" action="/e/{{.ID}}" method="POST">
        <div class="form-group input-group">
          <input class="form-input column col-3" type="text" name="id" value="{{.ID}}" readonly="readonly"/>
          <input class="form-input" id="input-url" type="text" name="url" value="{{.URL}}" placeholder="Enter long url here..." />
          <button class="btn btn-primary" id="submit" type="submit">OK</button>
          <a class="btn btn-action" href="/u/{{.ID}}">
            <i class="icon icon-forward">View</i>
          </a>
        </div>
      </form>
    </div>
  </div>
</section>
{{end}}
{{define "scripts"}}
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $("#input-url").focus(function() {
    $("#submit").removeAttr("data-tooltip", "Please enter long url").removeClass("tooltip tooltip-left");
  });

  $("#submit").click(function() {
    if ($("#input-url").val().trim() === "") {
      $(this).attr("data-tooltip", "Please enter long url").addClass("tooltip tooltip-left");
      return false;
    }
  });
});
</script>
{{end}}