{% extends "base.html" %}
{% load compress humanize static hc_extras %}

{% block title %}Add Webhook - {% site_name %}{% endblock %}


{% block content %}
<div class="row">
<div class="col-sm-12">
    <h1>Webhook</h1>

    <p>Runs a HTTP GET or HTTP POST to your specified URL when a check
    goes up or down. Uses GET by default, and uses POST if you specify
    any POST data.</p>

    <p>You can use the following variables in webhook URLs:</p>
    <table class="table webhook-variables">
        <tr>
            <th class="variable-column">Variable</th>
            <td>Will be replaced with…</td>
        </tr>
        <tr>
            <th><code>$CODE</code></th>
            <td>The UUID code of the check</td>
        </tr>
        <tr>
            <th><code>$NAME</code></th>
            <td>Name of the check</td>
        </tr>
        <tr>
            <th><code>$NOW</code></th>
            <td>
                Current UTC time in ISO8601 format.
                Example: "{{ now }}"
            </td>
        </tr>
        <tr>
            <th><code>$STATUS</code></th>
            <td>Check's current status ("up" or "down")</td>
        </tr>
        <tr>
            <th><code>$TAG1, $TAG2, …</code></th>
            <td>Value of the first tag, the second tag, …</td>
        </tr>
    </table>

    <p>For example, a callback URL using variables might look like so:
    <pre>http://requestb.in/1hhct291?message=<strong>$NAME</strong>:<strong>$STATUS</strong></pre>

    <p>
        After encoding and replacing the variables, {% site_name %} would then call:
    </p>
    <pre>http://requestb.in/1hhct291?message=<strong>My%20Check</strong>:<strong>down</strong></pre>

    <h2>Integration Settings</h2>

    <form method="post" class="form-horizontal">
        {% csrf_token %}
        <input type="hidden" name="kind" value="webhook" />
        <div class="form-group {{ form.url_down.css_classes }}">
            <label class="col-sm-2 control-label">URL for "down" events</label>
            <div class="col-sm-10">
                <input
                    type="text"
                    class="form-control"
                    name="url_down"
                    placeholder="http://..."
                    value="{{ form.url_down.value|default:"" }}">
                {% if form.url_down.errors %}
                <div class="help-block">
                    {{ form.url_down.errors|join:"" }}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="form-group {{ form.url_up.css_classes }}">
            <label class="col-sm-2 control-label">URL for "up" events</label>
            <div class="col-sm-10">
                <input
                    type="text"
                    class="form-control"
                    name="url_up"
                    placeholder="http://..."
                    value="{{ form.url_up.value|default:"" }}">
                {% if form.url_up.errors %}
                <div class="help-block">
                    {{ form.url_up.errors|join:"" }}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="form-group {{ form.post_data.css_classes }}">
            <label class="col-sm-2 control-label">POST data</label>
            <div class="col-sm-10">
                <input
                    type="text"
                    class="form-control"
                    name="post_data"
                    placeholder='{"status": "$STATUS"}'
                    value="{{ form.post_data.value|default:"" }}">
                {% if form.post_data.errors %}
                <div class="help-block">
                    {{ form.post_data.errors|join:"" }}
                </div>
                {% endif %}
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Request Headers</label>
            <div class="col-xs-12 col-sm-10">
                <div id="webhook-headers">
                    {% for k, v in form.headers.items %}
                    <div class="form-inline webhook-header">
                        <input
                            type="text"
                            class="form-control key {% if k in form.invalid_header_names %}error{% endif %}"
                            name="header_key[]"
                            placeholder="Content-Type"
                            value="{{ k }}" />
                        <input
                            type="text"
                            class="form-control value"
                            name="header_value[]"
                            placeholder="application/json"
                            value="{{ v }}" />
                            <button class="btn btn-default" type="button">
                                <span class="icon-delete"></span>
                            </button>
                    </div>
                    {% endfor %}
                </div>
                {% if form.invalid_header_names %}
                <div class="text-danger">
                    Please use valid HTTP header names.
                </div>
                {% endif %}
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">Save Integration</button>
            </div>
        </div>
    </form>
</div>
</div>

<div id="header-template" class="hide">
    <div class="form-inline webhook-header">
        <input
            type="text"
            class="form-control key"
            name="header_key[]"
            placeholder="Content-Type" />
        <input
            type="text"
            class="form-control value"
            name="header_value[]"
            placeholder="application/json" />
            <button class="btn btn-default" type="button">
                <span class="icon-delete"></span>
            </button>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/webhook.js' %}"></script>
{% endcompress %}
{% endblock %}