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

{% block title %}My Checks - {% site_name %}{% endblock %}


{% block content %}

<div class="row">
    <div id="details-head" class="col-sm-12">
        <h1>
            {{ check.name_then_code }}
            <button class="btn btn-sm btn-default">Edit</button>
        </h1>
        {% for tag in check.tags_list %}
            <span class="label label-tag">{{ tag }}</span>
        {% endfor %}
    </div>


    <div class="col-sm-6">
        <div class="details-block">
            <h2>Description
                <small><a href="#">edit</a></small>
            </h2>
            <p>This is for monitoring our fancy backup script.</p>
            <p>The script runs on a $5 VM and sometimes runs out of memory and crashes.
            If this happens, contact Ed and ask him to restart it.</p>
        </div>

        <div class="details-block">
            <h2>How To Ping</h2>
            <div>
                <p>Keep this check up by making HTTP requests to this URL:</p>
                <code>{{ check.url }}</code>
                <p>Or by sending emails to this address:</p>
                <code>{{ check.email }}</code>
            </div>
            <div class="text-right">
                <button class="btn btn-sm btn-default">Copy URL</button>
                <button class="btn btn-sm btn-default">Copy Email</button>
                <button class="btn btn-sm btn-default">Usage Examples</button>
            </div>
        </div>

        <div class="details-block">
            <h2>Current Status</h2>
            <table>
                <tr>
                    <td>
                        <span class="status icon-{{ check.get_status }}"></span>
                    </td>
                    <td>
                        This check is down. Last ping was {{ check.last_ping|naturaltime }}.
                    </td>
                </tr>
            </table>
            <div class="text-right">
                <button class="btn btn-sm btn-default">Pause</button>
                <button class="btn btn-sm btn-default">Ping Now!</button>
            </div>
        </div>

        <div class="details-block">
            <h2>Schedule</h2>
            <table id="log-schedule">
                <tr>
                    <th>Period</th>
                    <td>
                        <span class="value">{{ check.timeout|hc_duration }}</span>
                        <div class="subtitle">
                            (Expected time between pings)
                        </div>
                    </td>
                </tr>
                <tr>
                    <th>Grace Time</th>
                    <td>
                        <span class="value">{{ check.grace|hc_duration }}</span>
                        <div class="subtitle">
                            (When a check is late, how long to wait until an alert is sent)
                        </div>
                    </td>
                </tr>
            </table>
            <div class="text-right">
                <button class="btn btn-sm btn-default">Change Schedule</button>
            </div>
        </div>

        <div class="details-block">
            <h2>Notification Methods</h2>
            <table id="details-integrations" class="table">
            {% for channel in channels %}
                <tr>
                    <th>
                        {% if channel in check.channel_set.all %}
                        <span class="label label-success">ON</span>
                        {% else %}
                        <span class="label label-default">OFF</span>
                        {% endif %}
                    </th>
                    <td>
                        <span class="icon-{{ channel.kind }}"></span>
                        {{ channel }}
                    </td>
                </tr>
            {% endfor %}
            </table>
        </div>

        <div class="details-block">
            <h2>Remove</h2>
            <p>Permanently remove this check from your account.</p>
            <div class="text-right">
                <button id="details-remove-check" class="btn btn-sm btn-default">Remove This Check</button>
            </div>
        </div>

    </div>



    <div class="col-sm-6">
    {% if events %}
    <h2>
        Log
        <small>Click on individual items for details</small>
        <div id="format-switcher" class="btn-group pull-right" data-toggle="buttons">
            <label class="btn btn-default btn-xs" data-format="utc">
                <input type="radio" name="date-format" checked>
                UTC
            </label>

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

    <div class="table-responsive">
    <table class="table" id="log">
        {% for event in events %}
        {% if event.n %}
        <tr class="ok" data-dt="{{ event.created.isoformat }}" data-url="{% url 'hc-ping-details' check.code event.n  %}">
            <td class="n-cell">
                <span class="hash">#</span>{{ event.n }}
            </td>
            <td class="date"></td>
            <td class="time"></td>
            <td class="text-right">
                {% if event.fail %}
                <span class="label label-danger">Failure</span>
                {% else %}
                <span class="label label-success">OK</span>
                {% endif %}
            </td>
            <td class="details">
                <div>
                {% if event.scheme == "email" %}
                    {{ event.ua }}
                    <span class="ua-body">
                        {% if event.body %}
                            -  {{ event.body|trunc }}
                        {% endif %}
                    </span>
                {% else %}
                    {{ event.scheme|upper }}
                    {{ event.method }}
                    {% if event.remote_addr %}
                    from {{ event.remote_addr }}
                    {% endif %}
                    <span class="ua-body">
                        {% if event.ua %}
                        - {{ event.ua }}
                        {% endif %}
                        {% if event.body %}
                        -  {{ event.body|trunc }}
                        {% endif %}
                    </span>
                {% endif %}
                </div>
            </td>
        </tr>
        {% endif %}
        {% if event.check_status %}
        <tr class="missing" data-dt="{{ event.created.isoformat }}">
            <td class="n-cell">
                <span class="icon-missing"></span>
            </td>
            <td class="date"></td>
            <td class="time"></td>
            <td class="alert-info" colspan="2">
                {% if event.channel.kind == "email" %}
                    Sent email alert to {{ event.channel.value }}
                {% elif event.channel.kind == "slack" %}
                    Sent Slack alert
                    {% if event.channel.slack_channel %}
                        to {{ event.channel.slack_channel }}
                    {% endif %}
                {% elif event.channel.kind == "pd" %}
                    Sent alert to PagerDuty
                {% elif event.channel.kind == "pagertree" %}
                    Sent alert to PagerTree
                {% elif event.channel.kind == "opsgenie" %}
                    Sent alert to OpsGenie
                {% elif event.channel.kind == "hipchat" %}
                    Sent alert to HipChat
                {% elif event.channel.kind == "po" %}
                    Sent a Pushover notification
                {% elif event.channel.kind == "webhook" %}
                    Called webhook {{ event.channel.url_down }}
                {% else %}
                    Sent alert to {{ event.channel.kind|capfirst }}
                {% endif %}
                {% if event.error %}
                    <br />
                    <strong>Error: {{ event.error }}</strong>
                {% endif %}
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </table>

    {% if show_limit_notice and limit < 1000 %}
    <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>

<div id="ping-details-modal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="ping-details-body">Loading</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Got It!</button>
            </div>
        </div>
    </div>
    <form>
        {% csrf_token %}
    </form>
</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 %}