{% load hc_extras staticfiles %}
<table id="checks-table" class="table hidden-xs hidden-sm">
    <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>Ping URL</th>
        <th class="th-integrations">Integrations</th>
        <th class="th-period">
            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></th>
    </tr>
    {% for check in checks %}
    <tr class="checks-row">
        <td class="indicator-cell">
            {% if check.in_grace_period %}
                <span id="si-{{ check.code }}" class="status icon-grace" data-toggle="tooltip"></span>
            {% else %}
                <span id="si-{{ check.code }}" class="status icon-{{ check.get_status }}" data-toggle="tooltip"></span>
            {% endif %}
        </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" }}</div>
                {% for tag in check.tags_list %}
                <span class="label label-tag">{{ tag }}</span>
                {% endfor %}
            </div>
        </td>
        <td class="url-cell">
            <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">
            {% if channels|length < 8 %}
                <div class="integrations">
                {% spaceless %}
                {% for channel in channels %}
                    <img
                        data-toggle="tooltip"
                        data-url="{% url 'hc-switch-channel' check.code channel.code %}"
                        title="{{ channel }}"
                        src="{{ channel.icon_url }}"
                        {% if channel in check.channel_set.all %}{% else %}class="off"{% endif %} />
                {% endfor %}
                {% endspaceless %}
                </div>
            {% else %}
                {{ check.channel_set.all|length }} of {{ channels|length }}
            {% endif %}
        </td>
        <td class="timeout-cell">
            <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 id="lpd-{{ check.code}}" class="last-ping-cell">
            {% include "front/last_ping_cell.html" with check=check %}
        </td>
        <td>
            <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"
                            data-url="{{ check.url }}"
                            data-email="{{ check.email }}">
                            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>