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

{% block title %}My Checks - healthchecks.io{% endblock %}


{% block content %}
<div class="row">
    <div class="col-sm-12">
    <h1>My Checks</h1>
    {% if checks %}
    <table id="checks-table" class="table table-hover">
        <tr>
            <th></th>
            <th class="th-name">Name</th>
            <th>URL</th>
            <th>Frequency</th>
            <th>Last Ping</th>
        </tr>
        {% for check in checks %}
        <tr class="checks-row">
            <td class="indicator-cell">
                {% if check.status == "new" %}
                    <span class="glyphicon glyphicon-question-sign new"></span>
                {% elif now < check.alert_after %}
                    <span class="glyphicon glyphicon-ok-sign up"></span>
                {% else %}
                    <span class="glyphicon glyphicon-exclamation-sign down"></span>
                {% endif %}
            </td>
            <td class="name-cell">
                <form
                    method="post"
                    action="{% url 'hc-update-name' check.code %}"
                    class="name-edit form-inline inactive">
                    {% csrf_token %}
                    <input
                        name="name"
                        type="text"
                        value="{{ check.name }}"
                        placeholder="unnamed"
                        class="input-name form-control" />

                    <button class="btn btn-primary" type="submit">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                    <button class="btn btn-default name-edit-cancel">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </form>
            </td>
            <td class="url-cell">
                <code>{{ check.url }}</code>
            </td>
            <td class="timeout-cell inactive">
                <div class="timeout-dialog popover bottom">
                <div class="arrow"></div>
                <div class="popover-content">
                <form
                    method="post"
                    action="{% url 'hc-update-timeout' check.code %}"
                    class="form-inline">
                    {% csrf_token %}
                    <select class="form-control" name="timeout">
                        {% for label, value in timeout_choices %}
                            {% if check.timeout == value %}
                                <option selected>{{ label }}</option>
                            {% else %}
                                <option>{{ label }}</option>
                            {% endif %}
                        {% endfor %}
                    </select>
                    <button class="btn btn-primary" type="submit">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                    <button class="btn btn-default timeout-edit-cancel">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                </form>
                </div>
                </div>
                <span class="timeout">
                    {% for label, value in timeout_choices %}
                        {% if check.timeout == value %}
                            {{ label }}
                        {% endif %}
                    {% endfor %}
                </span>
            </td>
            <td>
            {% if check.last_ping %}
                <span
                    data-toggle="tooltip"
                    title="{{ check.last_ping }}">
                    {{ check.last_ping|naturaltime }}
                </span>
            {% else %}
                Never
            {% endif %}
            </td>
        </tr>
        {% endfor %}

    </table>
    {% else %}
    <div class="alert alert-info">You don't have any checks yet.</div>
    {% endif %}
    </div>
</div>
<div class="row">
    <div class="col-sm-12"></div>
        <form method="post" action="{% url 'hc-add-check' %}" class="text-center">
            {% csrf_token %}
            <input type="submit" class="btn btn-primary btn-lg" value="Add Check">
        </form>
    </div>

</div>



{% endblock %}

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