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

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


{% block content %}

<div class="row">
    <div class="col-sm-12">
        <ol class="breadcrumb">
            <li><a href="{% url 'hc-checks' %}">Checks</a></li>
            <li>{{ check.name_then_code }}</li>
            <li class="active">Log</li>

            <div class="pull-right">
                <div id="format-switcher" class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default btn-xs" data-format="utc">
                        <input type="radio" name="date-format" autocomplete="off" checked>
                        UTC
                    </label>

                    <label class="btn btn-default btn-xs active" data-format="local">
                        <input type="radio" name="date-format" autocomplete="off">
                        Local Time
                    </label>
                </div>
            </div>
        </ol>

    {% if pings %}
    <div class="table-responsive">
    <table class="table" id="log">
        <tr>
            <th></th>
            <th class="datetime">
                <span class="date">Date</span>
                <span class="time">Time</span>
            </th>
            <th class="ip">IP</th>
            <th class="protocol">Protocol</th>
            <th class="ua">User Agent</th>
        </tr>
        {% for record in pings %}
        {% if record.ping %}
        <tr class="ok {% if record.early %} early {% endif %}">
            <td class="n-cell">
                {% if record.ping.n %}
                <span class="hash">#</span>{{ record.ping.n }}
                {% endif %}
            </td>
            <td class="datetime" data-raw="{{ record.ping.created.isoformat }}">
                <div>
                    <span class="date"></span>
                    <span class="time"></span>
                    {% if record.early %}
                        <span class="label label-tag">early</span>
                    {% endif %}
                </div>
            </td>
            <td class="ip">
                {{ record.ping.remote_addr|default:"" }}
            </td>
            <td class="protocol">
                {{ record.ping.scheme }}
            </td>

            <td class="ua">
                {{ record.ping.ua }}
            </td>
        </tr>
        {% endif %}
        {% if record.placeholder_date %}
        <tr class="missing">
            <td class="n-cell">
                <span class="glyphicon glyphicon-remove"></span>
            </td>
            <td class="datetime" data-raw="{{ record.placeholder_date.isoformat }}">
                <div>
                    <span class="date"></span>
                    <span class="time"></span>
                </div>
            </td>
            <td colspan="4">
                <small>Ping expected but not received</small>
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </table>

    {% if show_limit_notice and limit < 10000 %}
    <p class="alert alert-info">
        <strong>Showing last {{ limit }} pings.</strong>
        Want to see more?
        <a href="{% url 'hc-pricing' %}">
            Upgrade your account!
        </a>
    </p>
    {% endif %}

    </div>
    {% else %}
        <div class="alert alert-info">Log is empty. This check has not received any pings yet.</div>
    {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/moment.min.js' %}"></script>
<script src="{% static 'js/log.js' %}"></script>
{% endcompress %}
{% endblock %}