{% load hc_extras staticfiles %}
<table id="checks-table" class="table">
    <tr>
        <th></th>
        <th class="th-name">
            {% if sort == "name" %}
            <a href="?sort=-name" data-toggle="tooltip" class="sort-name">
                Name<span class="icon-asc"></span>
            </a>
            {% elif sort == "-name" %}
            <a href="?sort=created" data-toggle="tooltip" class="sort-name">
                Name<span class="icon-desc"></span>
            </a>
            {% else %}
            <a href="?sort=name" data-toggle="tooltip" class="default sort-name">
                Name
            </a>
            {% endif %}
        </th>
        <th class="hidden-xs hidden-sm">Ping URL</th>
        <th class="th-integrations hidden-xs">Integrations</th>
        <th class="th-period hidden-xs">
            Period <br />
            <span class="checks-subline">Grace</span>
        </th>
        <th class="th-last-ping">
            {% if sort == "last_ping" %}
            <a href="?sort=created" data-toggle="tooltip" class="sort-last-ping">
                Last Ping<span class="icon-desc"></span>
            </a>
            {% elif sort == "-last_ping" %}
            <a href="?sort=last_ping" data-toggle="tooltip" class="sort-last-ping">
                Last Ping<span class="icon-asc"></span>
            </a>
            {% else %}
            <a href="?sort=-last_ping" data-toggle="tooltip" class="default sort-last-ping">
                Last Ping</span>
            </a>
            {% endif %}
        </th>
        <th class="hidden-xs"></th>
    </tr>
    {% for check in checks %}
    <tr
        class="checks-row"
        data-code="{{ check.code }}"
        data-url="{{ check.url }}"
        data-email="{{ check.email }}">

        <td class="indicator-cell">
            <span id="si-{{ check.code }}" class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
        </td>
        <td class="name-cell">
            <div data-name="{{ check.name }}"
                    data-tags="{{ check.tags }}"
                    data-url="{% url 'hc-update-name' check.code %}"
                    class="my-checks-name {% if not check.name %}unnamed{% endif %}">
                <div>{{ check.name|default:"unnamed"|break_underscore }}</div>
                {% for tag in check.tags_list %}
                <span class="label label-tag">{{ tag }}</span>
                {% endfor %}
            </div>
        </td>
        <td class="url-cell hidden-xs hidden-sm">
            <span class="my-checks-url">
                <span class="base">{{ ping_endpoint }}</span>{{ check.code }}
            </span>
            <button
                class="copy-link hidden-sm"
                data-clipboard-text="{{ check.url }}">
                copy
            </button>
        </td>
        <td class="integrations-cell hidden-xs">
            {% if channels|length <= 10 %}
                <div class="integrations">
                {% spaceless %}
                {% for channel in channels %}
                    <span class="icon-{{ channel.kind }}{% if channel in check.channel_set.all %}{% else %} off{% endif %}"></span>
                {% endfor %}
                {% endspaceless %}
                </div>
            {% else %}
                {{ check.channel_set.all|length }} of {{ channels|length }}
            {% endif %}
        </td>
        <td class="timeout-cell hidden-xs">
            <div
                data-url="{% url 'hc-update-timeout' check.code %}"
                data-kind="{{ check.kind }}"
                data-timeout="{{ check.timeout.total_seconds }}"
                data-grace="{{ check.grace.total_seconds }}"
                data-schedule="{{ check.schedule }}"
                data-tz="{{ check.tz }}"
                class="timeout-grace">
                {% if check.kind == "simple" %}
                    {{ check.timeout|hc_duration }}
                {% elif check.kind == "cron" %}
                    <span class="cron-expression">{{ check.schedule }}</span>
                {% endif %}
                <br />
                <span class="checks-subline">
                {{ check.grace|hc_duration }}
                </span>
            </div>
        </td>
        <td>
            <div id="lpd-{{ check.code}}" class="last-ping">
                {% include "front/last_ping_cell.html" with check=check %}
            </div>
        </td>
        <td class="hidden-xs">
            <div class="check-menu dropdown">
                <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                <span class="icon-settings" aria-hidden="true"></span>
                </button>
                <ul class="dropdown-menu">
                    <li id="pause-li-{{ check.code }}" {% if check.status == "new" or check.status == "paused" %}class="disabled"{% endif %}>
                        <a class="pause-check"
                           href="#"
                           data-url="{% url 'hc-pause' check.code %}">
                           Pause Monitoring
                        </a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                        <a href="{% url 'hc-log' check.code %}">
                            Log
                        </a>
                    </li>
                    <li>
                        <a href="#" class="usage-examples">Usage Examples</a>
                    </li>
                    <li role="separator" class="divider"></li>
                    <li>
                        <a href="#" class="check-menu-remove"
                            data-name="{{ check.name_then_code }}"
                            data-url="{% url 'hc-remove-check' check.code %}">
                            Remove
                        </a>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
    {% endfor %}

</table>

{% for channel in channels %}
<div
    id="ch-{{ forloop.counter0}}"
    data-code="{{ channel.code }}"
    data-title="{{ channel }}">
</div>
{% endfor %}