@(webHook: gitbucket.core.model.WebHook,
  events: Set[gitbucket.core.model.WebHook.Event],
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  info: Option[Any],
  create: Boolean)(implicit context: gitbucket.core.controller.Context)
@import context._
@import gitbucket.core.view.helpers._
@import gitbucket.core.model.WebHook._
@check(name: String, event: Event)={
  name="@(name).@event.name" value="on" @if(events(event)){checked}
}
@html.main("Settings", Some(repository)){
  @html.menu("settings", repository){
    @menu("hooks", repository){
      @helper.html.information(info)
      <div class="panel panel-default">
        <div class="panel-heading strong">Webhook / Manage webhook</div>
        <div class="panel-body">
          <form method="POST" validate="true">
            <fieldset class="form-group">
              <label class="strong">Payload URL</label>
              <div>
                <span class="error" id="error-url"></span>
              </div>
              @if(create){
                <input type="text" name="url" id="url" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" required />
              } else {
                <input type="text" value="@webHook.url" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" disabled />
                <input type="hidden" value="@webHook.url" name="url" />
              }
              <button class="btn btn-default" id="test">Test Hook</button>
            </fieldset>
            <fieldset class="form-group">
              <label class="strong">Security Token</label>
              <div></div>
              <input type="text" name="token" id="token" placeholder="leave blank for no X-Hub-Signature usage" value="@webHook.token" class="form-control" style="display: inline; width: 500px; vertical-align: middle;" />
            </fieldset>
            <hr />
            <label class="strong">Which events would you like to trigger this webhook?</label>
            <div>
              <span class="error" id="error-events"></span>
            </div>
            <!--
            <label class="checkbox"><input type="checkbox" @check("events",CommitComment) />Commit comment <small class="help-block">Commit or diff commented on. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Create) />Create <small class="help-block">Branch, or tag created. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Delete) />Delete <small class="help-block">Branch, or tag deleted. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Deployment) />Deployment <small class="help-block">Repository deployed. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",DeploymentStatus) />Deployment status <small class="help-block">Deployment status updated from the API. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Fork) />Fork <small class="help-block">Repository forked. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Gollum) />Gollum <small class="help-block">Wiki page updated. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Member) />Member <small class="help-block">Collaborator added to a non-organization repository. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",PageBuild) />Page build <small class="help-block">Pages site built. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Public) />Public <small class="help-block">Repository changes from private to public. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Release) />Release <small class="help-block">Release published in a repository. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",TeamAdd) />Team add <small class="help-block">Team added or modified on a repository. </small> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Watch) />Watch <small class="help-block">User stars a repository.</small></label>
            <label class="checkbox"><input type="checkbox" @check("events",Status) />Status <small class="help-block">Commit status updated from the API. </small> </label>
            -->
            <label class="checkbox"><input type="checkbox" @check("events",IssueComment) />Issue comment <span class="help-block normal">Issue commented on. </span> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Issues) />Issues <span class="help-block normal">Issue opened, closed<!-- , assigned, or labeled -->. </span> </label>
            <label class="checkbox"><input type="checkbox" @check("events",PullRequest) />Pull Request <span class="help-block normal">Pull Request opened, closed<!-- , assigned, labeled -->, or synchronized. </span> </label>
            <label class="checkbox"><input type="checkbox" @check("events",PullRequestReviewComment) />Pull Request review comment <span class="help-block normal">Pull Request diff commented on. </span> </label>
            <label class="checkbox"><input type="checkbox" @check("events",Push) />Push <span class="help-block normal">Git push to a repository. </span> </label>
            <div class="text-right">
              @if(!create){
                <input type="submit" class="btn btn-success" value="Update webhook" formaction="@url(repository)/settings/hooks/edit" />
                <a href="@url(repository)/settings/hooks/delete?url=@urlEncode(webHook.url)" class="btn btn-danger" onclick="return confirm('delete webhook for @webHook.url ?')">
                  Delete webhook
                </a>
              } else {
                <input type="submit" class="btn btn-success" value="Add webhook" formaction="@url(repository)/settings/hooks/new" />
              }
            </div>
          </form>
        </div>
      </div>
      <div class="modal" id="test-report-modal" role="dialog" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h3>WebHook Test</h3>
            </div>
            <div class="modal-body" style="max-height: 300px; overflow: auto;">
              <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
              <div id="test-report" style="display:none">
                <ul class="nav nav-tabs" id="test-report-tab">
                  <li class="active"><a href="#request">Request</a></li>
                  <li><a href="#response">Response <span class="badge badge-success" id="res-status"></span></a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="request">
                    <div id="req-errors" class="alert alert-error">
                      ERROR<span id="req-errors-body"></span>
                    </div>
                    <div id="req-success" style="display:none">
                      Headers
                      <pre id="req-headers"></pre>
                      Payload
                      <pre id="req-payload"></pre>
                    </div>
                  </div>
                  <div class="tab-pane" id="response">
                    <div id="res-errors" class="alert alert-error">
                      ERROR<span id="res-errors-body"></span>
                    </div>
                    <div id="res-success" style="display:none">
                      Headers
                      <pre id="res-headers"></pre>
                      Body
                      <pre id="res-body"></pre>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
<script>
$(function(){
  $('#test-report-tab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  });
  $('#test').click(function(e){
    e.stopPropagation();
    e.stopImmediatePropagation();
    e.preventDefault();
    var url = this.form.url.value;
    var token = this.form.token.value;
    if(!/^https?:\/\/.+/.test(url)){
      alert("invalid url");
      return;
    }
    $("#test-modal-url").text(url)
    $("#test-report-modal").modal('show')
    $("#test-report").hide();
    $.ajax({
      method:'POST',
      url:'@url(repository)/settings/hooks/test?url=' + encodeURIComponent(url) + '&token=' + encodeURIComponent(token),
      success: function(e){
        //console.log(e);
        $('#test-report-tab a:first').tab('show');
        $("#test-report").show();
        $("#req-success").toggle(e.request&&!e.request.error);
        $("#req-errors").toggle(e.request&&!!e.request.error);
        $("#req-errors-body").text(e.request.error);
        function headers(h){
          h = h["headers"];
          return h ? $.map(h, function(h){
            return $("<div>").append($('<b>').text(h[0] + ":"),$('<span>').text(" " + h[1]))
          }):"";
        }
        $("#req-headers").html(headers(e.request));
        $("#req-payload").text(e.request && e.request.payload ? JSON.stringify(JSON.parse(e.request.payload),undefined,4) : "");
        $("#res-success").toggle(e.responce && !e.responce.error);
        $("#res-errors").toggle(e.responce && !!e.responce.error);
        $("#res-errors-body").text(e.responce.error);
        var success = !!(e.responce && e.responce.status && /^2\d\d$/.test(e.responce.status.statusCode));
        $("#res-status").text((e.responce && e.responce.status && e.responce.status.statusCode) || "ERROR");
        $("#res-status").toggleClass("badge-success", success).toggleClass("badge-important", !success);
        $("#res-headers").html(headers(e.responce));
        $("#res-body").text(e.responce && e.responce.body ? e.responce.body : "");
      },
    });
    return false;
  });
})
</script>
    }
  }
}