{% extends "base.html" %}
{% load humanize 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-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>
                <a href="#node" data-toggle="tab">Node.js</a>
            </li>
            <li>
                <a href="#php" data-toggle="tab">PHP</a>
            </li>
            <li>
                <a href="#browser" data-toggle="tab">Browser</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="crontab">
                <pre>{% include "front/snippets/crontab.txt" %}</pre>
            </div>
            <div role="tabpanel" class="tab-pane" id="bash">
                <pre>{% include "front/snippets/bash.txt" %}</pre>
            </div>
            <div role="tabpanel" class="tab-pane" id="python">
                <pre>{% include "front/snippets/python.txt" %}</pre>
            </div>
            <div class="tab-pane" id="browser">
                <pre>{% include "front/snippets/browser.txt" %}</pre>
                <div class="welcome-browser-controls">
                    <button id="run-it" class="btn btn-default">Run It!</button>
                </div>
            </div>
        </div>

    </div>


    <div id="welcome-status" class="col-sm-6">
        <h2>Status
        <small>{{ check.code }}</small>
        </h2>
        <table class="table">
            <tr>
                <th>Last ping</th>
                <th>Frequency</th>
                <th>Alert in</th>
            </tr>
            <tr>
                <td id="last-ping">
                    {% if check.last_ping %}
                        {{ check.last_ping|naturaltime }}
                    {% else %}
                        Never
                    {% endif %}
                </td>
                <td>1 day
                    <span
                        class="glyphicon glyphicon-question-sign"
                        data-toggle="tooltip"
                        title="Sign in to change frequency"></span>
                </td>
                <td id="timer" data-timer="{{ timer}}">
                    {{ timer_formatted }}
                </td>
            </tr>
        </table>
    </div>

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

{% block scripts %}
<script src="{% static 'js/index.js' %}"></script>
{% endblock %}