{% load hc_extras %}
<table id="checks-table" class="table hidden-xs">
    <tr>
        <th></th>
        <th class="th-name">
            {% if sort == "name" %}
            <a href="?sort=-name">Name<span class="icon-asc"></span></a>
            {% elif sort == "-name" %}
            <a href="?sort=created">Name<span class="icon-desc"></span></a>
            {% else %}
            <a href="?sort=name" class="default">Name</span></a>
            {% endif %}
        </th>
        <th>Ping URL</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">Last Ping<span class="icon-desc"></span></a>
            {% elif sort == "-last_ping" %}
            <a href="?sort=last_ping">Last Ping<span class="icon-asc"></span></a>
            {% else %}
            <a href="?sort=-last_ping" class="default">Last Ping</span></a>
            {% endif %}
        </th>
        <th></th>
    </tr>
    {% for check in checks|sortchecks:sort %}
    <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="timeout-cell">
            <span
                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>
            </span>
        </td>
        <td id="lpd-{{ check.code}}">
            {% 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>