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

{% block title %}Spike.sh Integration for {% site_name %}{% endblock %}


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

        <p>If you are using <a href="https://spike.sh">Spike.sh</a>, make sure to please copy the Healthchecks webhook
            and paste it here. Read through the instructions.</p>

        <h2>Setup Guide</h2>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    Create a <strong>Healthchecks</strong> integration by clicking on <a
                        href="https://app.spike.sh/integrations/new">add
                        integration</a> on Spike.sh’s dashboard.
                </p>
            </div>
            <div class="col-sm-6">
                <div class="marker-wrap">
                    <span style="left: 89%; top: 19%;" class="marker"></span>
                    <img class="ai-guide-screenshot" alt="Click create integration button"
                        src="{% static 'img/integrations/setup_spike_1.png' %}" />
                </div>
            </div>
        </div>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    After you have created the integration, click on copy webhook.

                </p>
            </div>
            <div class="col-sm-6">
                <img class="ai-guide-screenshot" alt="Create Healthchecks.io integration with details"
                    src="{% static 'img/integrations/setup_spike_2.png' %}">
            </div>
        </div>

        <div class="row ai-step">
            <div class="col-sm-6">
                <span class="step-no"></span>
                <p>
                    This modal with the details for the webhook will show up. Copy that webhook and paste it below. Make
                    sure you have Healthchecks integration’s webhook so Spike.sh can create and resolve incidents
                    automatically.

                </p>
            </div>
            <div class="col-sm-6">
                <div class="marker-wrap">
                    <span style="left: 32%; top: 59%;" class="marker"></span>

                    <img class="ai-guide-screenshot" alt="Copy the Webhook URL"
                        src="{% static 'img/integrations/setup_spike_3.png' %}">
                </div>
            </div>
        </div>

        <h2>Integration Settings</h2>

        <form method="post" class="form-horizontal">
            {% csrf_token %}
            <div class="form-group {{ form.value.css_classes }}">
                <label for="post-url" class="col-sm-2 control-label">Endpoint</label>
                <div class="col-sm-10">
                    <input id="post-url" type="text" class="form-control" name="value" placeholder="https://"
                        value="{{ form.value.value|default:"" }}">

                    {% if form.value.errors %}
                    <div class="help-block">
                        {{ form.value.errors|join:"" }}
                    </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>
{% endblock %}