{% load hc_extras humanize %}

<table id="checks-table" class="table hidden-xs">
    <tr>
        <th></th>
        <th class="th-name">Name</th>
        <th>
            <a id="show-urls" class="active" href="#">URL</a>
            <a id="show-emails" href="#">Email</a>
        </th>
        <th class="th-period">
            Period <br />
            <span class="checks-subline">Grace</span>
        </th>
        <th>Last Ping</th>
        <th></th>
    </tr>
    {% for check in checks %}
    <tr class="checks-row">
        <td class="indicator-cell">
            {% if check.get_status == "new" %}
                <span class="glyphicon glyphicon-question-sign new"></span>
            {% elif check.get_status == "up" %}
                <span class="glyphicon glyphicon-ok-sign up"></span>
            {% elif check.get_status == "grace" %}
                <span class="glyphicon glyphicon-exclamation-sign grace"></span>
            {% elif check.get_status == "down" %}
                <span class="glyphicon glyphicon-exclamation-sign down"></span>
            {% elif check.get_status == "paused" %}
                <span class="glyphicon glyphicon-minus-sign paused"></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">
            <div class="placeholder">{{ check.url }}</div>
            <div class="my-checks-url">
                <input
                    data-toggle="tooltip"
                    title="Click to select"
                    class="selectable"
                    type="text"
                    value="{{ check.url }}"
                    readonly />
            </div>
            <div class="my-checks-email off">
                <input
                    class="selectable"
                    type="text"
                    value="{{ check.email }}"
                    readonly />
            </div>
        </td>
        <td class="timeout-cell">
            <span
                data-url="{% url 'hc-update-timeout' check.code %}"
                data-timeout="{{ check.timeout.total_seconds }}"
                data-grace="{{ check.grace.total_seconds }}"
                class="timeout-grace">
                {{ check.timeout|hc_duration }}
                <br />
                <span class="checks-subline">
                {{ check.grace|hc_duration }}
                </span>
            </span>
        </td>
        <td>
        {% if check.last_ping %}
            <span
                data-toggle="tooltip"
                title="{{ check.last_ping }} GMT">
                {{ check.last_ping|naturaltime }}
            </span>
        {% else %}
            Never
        {% endif %}
        </td>
        <td>
            <div class="check-menu dropdown">
                <button class="btn btn-sm btn-default dropdown-toggle" type="button" data-toggle="dropdown">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                </button>
                <ul class="dropdown-menu">
                    <li>
                        <a href="{% url 'hc-log' check.code %}">
                            <span class="glyphicon glyphicon-time"></span>
                            Log
                        </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 %}">
                            <span class="glyphicon glyphicon-trash"></span>
                            Remove
                        </a>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
    {% endfor %}

</table>