{% extends "cacsremoteservice/views/settings/settings-page.html" %}

{% block kv-section %}
<p class="help-block">Read more about the GitHub App configuration in <a href="{{view-context}}/docs/guides/pr-integration/configure-github-app.html">the documentation</a>.</p>
<div class="form-group">
  <label>GitHub App ID</label>
  <input class="form-control" type="text"
         id="github-app-id"
         name="github-app-id"
         value="{{item.kv.app-id}}"/>
  <span class="help-block">Specify the app id for the app you create on GitHub.
                </span>
</div>
<div class="form-group">
  <input type="hidden" name="github-private-key" id="github-private-key" value="{{item.kv.private-key}}"/>
  <label>GitHub App Private Key</label>
  <input class="form-control" type="file" accept=".pem" name="github-private-key-file" id="github-private-key-file"/>
  <span class="help-block">Select the .pem file you download by generating a private key for the app on GitHub.</span>
</div>
<div class="form-group">
  <label>GitHub Webhook Secret</label>
  <input class="form-control" type="password"
         name="github-secret"
         value="{{item.kv.secret}}"
         autocomplete="new-password"/>
  <span class="help-block">Specify the webhook secret for the app you create on GitHub.</span>
</div>
<div class="form-group">
  <label>GitHub Webhook URL</label>
  <pre><code id="webhook-url">{{host-url}}/{% if view-context %}{{view-context}}/{% endif %}hooks/github-app/{{item.kv.app-id}}</code></pre>
  <span class="help-block">Specify this webhook URL in the app you create on GitHub.
                </span>
</div>
<script type="text/javascript">
  $('#github-app-id').keyup(function(e) {
    $('#webhook-url').text('{{host-url}}/{% if view-context %}{{view-context}}/{% endif %}hooks/github-app/'+ e.target.value);
  });
</script>
{% endblock %}