{% extends "base.html" %}
{% load staticfiles %}

{% block content %}
<div class="row">
    <div class="col-sm-12">
        <h1>Get Notified When Your CRON Jobs Fail</h1>
        <ol>
            <li>Create a pingback address on healtchecks.io <br />
            <img
                src="{% static 'img/intro-create-check.png' %}"
                alt="Screenshot of 'My Checks'"
                class="img-thumbnail" />

            </li>
            <li>Add a single line at the bottom of your batch processing task:

                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#bash" aria-controls="home" role="tab" data-toggle="tab">Bash</a>
                    </li>
                    <li role="presentation">
                        <a href="#python" aria-controls="profile" role="tab" data-toggle="tab">Python</a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="bash">
                        <pre>wget https://healthchecks.io/ping/b2012751-something-something/
                        </pre>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="python">
                        <pre>
>>> import urllib2
>>> urllib2.urlopen("http://localhost:8000/ping/b2012751-c542-4deb-b054-ff51322102b9")

                        </pre>
                    </div>
                </div>


            </li>
            <li>Receive an email from healthchecks.io when the task has an issue:</li>
        </ol>
    </div>
    <div class="col-sm-12">

        <h1>E-mail Address to Receive Notifications:</h1>
        <form action="{% url 'hc-create-account' %}" method="post">
            {% csrf_token %}

            <div class="form-group">
                <div class="input-group input-group-lg">
                    <div class="input-group-addon">@</div>
                    <input
                        type="email"
                        class="form-control"
                        id="id_email"
                        name="email"
                        autocomplete="email"
                        placeholder="Email">
                </div>
            </div>

            <div class="clearfix">
                <button type="submit" class="btn btn-lg btn-primary pull-right">
                    Get Started
                </button>
            </div>
        </form>

    </div>
</div>
{% endblock %}