{% load hc_extras %}
<table
    id="checks-table"
    class="table"
    data-status-url="{% url 'hc-status' request.team.user.username %}">
    <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
        id="{{ check.code }}"
        class="checks-row"
        data-url="{{ check.url }}"
        data-email="{{ check.email }}"
        {% if check in hidden_checks %}style="display: none"{% endif %}>

        <td class="indicator-cell">
            <span class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
        </td>
        <td>
            <div data-name="{{ check.name }}"
                 data-tags="{{ check.tags }}"
                 data-desc="{{ check.desc }}"
                 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-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">
            <button class="btn btn-sm btn-default show-log" type="button">
                <span class="icon-settings" aria-hidden="true"></span>
            </button>
        </td>
    </tr>
    {% endfor %}

</table>

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