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

{% block containers %}
<div class="index-bleed">
<div class="container">
    <div class="row">
    <div class="col-sm-12">
        <h1 id="pitch">Cron Monitoring. Get Notified When Your Cron Jobs Fail</h1>
    </div>
    </div>

    <div class="row">
    <div class="col-sm-12">
        <h2 id="pitch-subtitle">Here's an unique ping address for you:</h2>
        <div id="pitch-url">{{ ping_url }}</div>
    </div>
    </div>


    <div class="row">
        <div class="col-sm-12">
            <ul class="nav nav-tabs" role="tablist">
                <li class="active">
                    <a href="#crontab" data-toggle="tab">Crontab</a>
                </li>
                <li>
                    <a href="#bash" data-toggle="tab">Bash</a>
                </li>
                <li>
                    <a href="#python" data-toggle="tab">Python</a>
                </li>
                <li class="hidden-xs">
                    <a href="#node" data-toggle="tab">Node.js</a>
                </li>
                <li class="hidden-xs">
                    <a href="#php" data-toggle="tab">PHP</a>
                </li>
                <li class="hidden-xs">
                    <a href="#browser" data-toggle="tab">Browser</a>
                </li>
                <li class="hidden-xs">
                    <a href="#email" data-toggle="tab">Email</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="crontab">
                    {% include "front/snippets/crontab.html" %}
                </div>
                <div role="tabpanel" class="tab-pane" id="bash">
                    {% include "front/snippets/bash.html" %}
                </div>
                <div role="tabpanel" class="tab-pane" id="python">
                    {% include "front/snippets/python.html" %}
                </div>
                <div role="tabpanel" class="tab-pane" id="node">
                    {% include "front/snippets/node.html" %}
                </div>
                <div role="tabpanel" class="tab-pane" id="php">
                    {% include "front/snippets/php.html" %}
                </div>
                <div class="tab-pane" id="browser">
                    {% include "front/snippets/browser.html" %}
                </div>
                <div class="tab-pane" id="email">
                    <div class="instructions">
                        As an alternative to HTTP/HTTPS requests,
                        you can "ping" this check by sending an
                        email message to
                        <div class="email-address">
                            <a href="mailto:{{ check.email }}">{{ check.email }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="get-started-bleed">
<div class="container">
    <div class="row">
        <div id="get-started" class="col-sm-6 col-sm-offset-3">
            <h2>E-mail Address to Receive Alerts:</h2>
            <form action="{% url 'hc-login' %}" 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>
</div>
</div>

<div class="container">
    <div class="row">
    <div class="col-sm-12">
        <h2 class="tour-title">A quick peek of what's inside:</h2>
    </div>
    </div>

    <div class="row tour-section">
    <div class="col-sm-8">
        <img
            class="img-responsive"
            src="{% static 'img/my_checks.png' %}" alt="My Checks page" />
    </div>
    <div class="col-sm-4">
        <p>
            A list of your checks, one for each Cron job, daemon or
            periodically running task you want to monitor.
        </p>
        <p>
            Give names to your checks to easily recognize them
            later. Adjust Period and Grace time to match periodicity
            and duration of your tasks.
        </p>
    </div>
    </div>

    <div class="row tour-section">
    <div class="col-sm-8">
        <img
            class="img-responsive"
            src="{% static 'img/period_grace.png' %}" alt="Period/Grace Time dialog" />
    </div>
    <div class="col-sm-4">
        Each check has configurable <strong>Period</strong> and <strong>Grace Time</strong> parameters.
        Depending on these parameters and time since the last ping, the check is in one of the
        following states:

        <table class="table">
            <tr>
                <td>
                    <span class="glyphicon glyphicon-question-sign new"></span>
                </td>
                <td>
                    New.
                    A check that has been created, but has not received any pings yet.
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-ok-sign up"></span>
                </td>
                <td>
                    Up.
                    Time since last ping has not exceeded <strong>Period</strong>.
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-exclamation-sign grace"></span>
                </td>
                <td>
                    Late.
                    Time since last ping has exceeded <strong>Period</strong>,
                    but has not yet exceeded <strong>Period</strong> + <strong>Grace</strong>.
                </td>
            </tr>
            <tr>
                <td>
                    <span class="glyphicon glyphicon-exclamation-sign down"></span>
                </td>
                <td>
                    Down.
                    Time since last ping has exceeded <strong>Period</strong> + <strong>Grace</strong>.
                    When check goes from "Late" to "Down", HealthChecks
                    sends you an email alert.
                </td>
            </tr>
        </table>

    </div>
    </div>

</div>




{% endblock %}