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

{% block title %}{{ num_down|num_down_title }}{% endblock %}

{% block content %}
<div class="row">
    {% if tags %}
    <div id="my-checks-tags" class="col-sm-12">
        {% for tag, status in tags %}
            <div class="btn btn-xs {{ status }} {% if tag in selected_tags %}checked{% endif%}">{{ tag }}</div>
        {% endfor %}
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-sm-12">
    {% if checks %}
        {% include "front/my_checks_desktop.html" %}
    {% 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">
        {% if num_available > 0 %}
            <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>
            {% if num_available <= 10 %}
            <div class="add-check-note">
                ({{ checks|length }} in use, {{ num_available }} available)
            </div>
            {% endif %}
        {% else %}
            <div class="alert alert-info">
                <strong>Check limit reached.</strong>
                To add more checks, please
                <a href="{% url 'hc-billing' %}">upgrade your account!</a>
            </div>
        {% endif %}
    </div>
</div>

{% include "front/update_name_modal.html" %}
{% include "front/update_timeout_modal.html" %}

<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">
                <a
                    id="ping-details-log"
                    href="#"
                    class="btn btn-default">
                    Show Log
                </a>
                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="modal">
                    Got It!
                </button>
            </div>
        </div>
    </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/bootstrap-select.min.js' %}"></script>
<script src="{% static 'js/nouislider.min.js' %}"></script>
<script src="{% static 'js/clipboard.min.js' %}"></script>
<script src="{% static 'js/update-timeout-modal.js' %}"></script>
<script src="{% static 'js/adaptive-setinterval.js' %}"></script>
<script src="{% static 'js/checks.js' %}"></script>
{% endcompress %}
{% endblock %}