[[ define "content" ]]
  <section class="hero is-primary is-medium has-text-centered gopher">
    <div class="hero-content">
      <div class="container">
        <h2 class="subtitle">
          Enter the <strong>go get</strong> path to the project below:
        </h2>
        <form method="POST" action="/checks" id="check_form">
          <div>
            <p class="url">
              <input name="repo" type="text" class="input-box" placeholder="github.com/gojp/goreportcard"/>
            </p>
          </div>
          <div>
            <button type="submit" class="button btn-test is-large" href="#" role="button">Generate Report</button>
          </div>
        </form>
      </div>
    </div>
  </section>
  <section class="section container-suggestions">
      <div class="container">
          <div class="columns">
              <div class="column is-half">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Sponsored Report Cards</th>
                      </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="table-link"><a href="https://github.com/mergestat/mergestat">github.com/mergestat/mergestat</a></td>
                        </tr>
                        <tr>
                            <td class="table-link"><a href="https://github.com/photoprism/photoprism">github.com/photoprism/photoprism</a></td>
                        </tr>
                        <tr>
                            <td class="table-link"><a href="https://www.patreon.com/goreportcard">[Your Repo Here!]</a></td>
                        </tr>
                    </tbody>
                  </table>
              </div>
              <div class="column is-half">
                  <table class="table">
                    <thead>
                      <tr>
                        <th>Recently Generated</th>
                      </tr>
                    </thead>
                    <tbody>
                        [[ range .Recent ]]
                        <tr>
                            <td class="table-link"><a href="/report/[[ . ]]">[[ . ]]</a></td>
                        </tr>
                        [[ end ]]
                    </tbody>
                  </table>
              </div>
          </div>
      </div>
  </section>

  <section class="section container-results hidden">
    <div class="container">
        <div class="columns results-text">
        </div>
        <div class="columns">
          <div class="column is-quarter">
            <nav class="menu results">
            </nav>
            <div class="container-update">
            </div>
          </div>
          <div class="column">
              <div class="results-details">
              </div>
          </div>
        </div>
    </div>
  </section>

  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js" integrity="sha256-ZSnrWNaPzGe8v25yP0S6YaMaDLMTDHC+4mHTw0xydEk=" crossorigin="anonymous"></script>
  <script id="template-alert" type="text/x-handlebars-template">
      <div class="notification is-warning">
          <button class="delete"></button>
          {{{message}}}
      </div>
    </div>
  </script>
  <script type="text/javascript">
    var loading = false;

    // initialize handlebars templates
    var templates = {};
    $("script[id^=template]").each(function(){
      var name = $(this).attr("id").substring(9);
      var source   = $(this).html();
      templates[name] = Handlebars.compile(source);
    });

    function alertMessage(msg){
      var html = templates.alert({message: msg});
      var $alert = $(html);
      $alert.find(".delete").on("click", function(){
          $(this).closest(".notification").remove();
      });
      $("#notifications").children().remove();
      $alert.hide();
      $alert.appendTo("#notifications");
      $alert.slideDown();
    }

    var loadData = function(getRequest){
      loading = true;
      var $form = $(this),
          url = $form.attr("action"),
          method = $form.attr("method"),
          data = {};
        $form.serializeArray().map(function(x){data[x.name] = x.value;});

        if(!data["repo"]) {
            alertMessage("Input cannot be empty. Please enter a valid repository path");
            return false;
        }
        $("#check_form .button").addClass("is-loading");

        $.ajax({
          type: getRequest ? "GET" : "POST",
          url: url,
          data: data,
          dataType: "json"
      }).fail(function(xhr, status, err){
          alertMessage("There was an error processing your request: " + xhr.responseText);
      }).done(function(data, textStatus, jqXHR){
        if (data.redirect) {
            window.location.href = data.redirect;
        }
      }).always(function(){
          loading = false;
          $("a.refresh-button").removeClass("is-loading");
          $("#check_form .button").removeClass("is-loading");
      });
      return false;
    };

    // on ready
    $(function(){
      // handle form submission
      $("form#check_form").submit(loadData);
    });
  </script>
[[ end ]]
