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

{% block content %}
<div class="row">
<div class="col-sm-12">
    <h1 id="pitch">Get Notified When Your Cron Jobs Fail</h1>
</div>
</div>

<div class="row">
    <div class="col-sm-4">
        <p class="step-number">1</p>
        <p>
            Create a ping URL on healtchecks.io
        </p>
    </div>
    <div class="col-sm-4">
        <p class="step-number">2</p>
        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-c542-4deb-b054-ff51322102b9/
                </pre>
            </div>
            <div role="tabpanel" class="tab-pane" id="python">
                <pre>
>>> import urllib2
>>> urllib2.urlopen("https://healthchecks.io/ping/b2012751-c542-4deb-b054-ff51322102b9/")

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

    </div>
    <div class="col-sm-4">
        <p class="step-number">3</p>
        Receive an email from healthchecks.io when the task has an issue
    </div>


    <div id="get-started" class="col-sm-6 col-sm-offset-3">
        <h3>E-mail Address to Receive Notifications:</h3>
        <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 %}