{{define "content"}}
<section class="container">
  <div class="columns">
    <div class="column">
      {{ range $URL := .URLList }}
      <div class="input-group col-12">
        <span class="input-group-addon col-8 d-inline-block text-ellipsis">
          {{ $URL.ID }}
          <i class="icon icon-forward"></i>
          {{ $URL.URL -}}
        </span>
        <div class="popover popover-right">
          <a class="btn btn-action btn-primary tooltip tooltip-left" data-tooltip="View Detail" href="/u/{{$URL.ID}}">
            <i class="icon icon-forward">View</i>
          </a>
        </div>
        <a class="btn btn-action hide-md" href="/e/{{$URL.ID}}">
          <i class="icon icon-edit">Edit</i>
        </a>
        <a class="btn btn-action hide-lg" href="/d/{{$URL.ID}}">
          <i class="icon icon-delete">Delete</i>
        </a>
      </div>
      {{end}}
      <form class="mt-10" action="" method="POST">
        <div class="form-group input-group">
          <label class="form-label" for="input-url"></label>
          <input class="form-input" id="input-url" type="text" name="url" placeholder="Enter long url here..."
            autofocus>
          <button class="btn btn-primary" id="submit" type="submit">Shorten</button>
        </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}}