<link href="/inc/table.css" rel="stylesheet" type="text/css">
<script type="text/javascript" charset="utf8" src="/inc/dataTables.min.js"></script>
{% if action == "history" %}
    {% set column_for_sort = 4 %}
{% else %}
    {% set column_for_sort = 3 %}
{% endif %}
<script>
    $(document).ready(function() {
        $('#alerts_table').on( 'page.dt' )
            .DataTable( {
                "order": [[ {{column_for_sort}}, "desc" ]],
                "pageLength": 25,
                "columnDefs": [
                    {
                        "searchable": false,
                        "orderable": false,
                    }
                ],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
            } );
    } );
</script>
<table class="overview hover order-column display compact" id="alerts_table">

    <thead>
    <tr class="overviewHead">
        <th class="padding10" style="width: 10%; padding-left: 10px;">
            Level
        </th>
        <th>
            Host
        </th>
        {% if action != "checker_history" %}
        <th>
            Port
        </th>
        {% endif %}
        <th>
            Alert
        </th>
        <th>
            Date
        </th>
        <th>
            Time
        </th>
    </tr>
    </thead>
    <tbody>
    {% if smon != '' %}
    {% for t in smon %}
    <tr>
        <td class="padding10" style="width: 10%; padding: 7px 7px 7px 10px;">
            {% if t.1 == 'info' %}
                {% set color = '#5ad05a' %}
            {% else %}
                {% set color = '#be2424' %}
            {% endif %}
            <span style="color: {{color}};"><b>{{t.1 |upper}}</b></span>
        </td>
        <td>
            {{t.2}}
        </td>
        {% if action != "checker_history" %}
        <td>
            {{t.3}}
        </td>
        {% endif %}
        <td>
            {{t.0}}
        </td>
        <td>
            {{t.4.split(' ')[0]}}
        </td>
        <td>
            {{t.4.split(' ')[1]}}
        </td>
    </tr>
    {% endfor %}
    {% else %}
    <span class="alert alert-warning" style="margin-bottom: 0px;">Table is empty</span>
    {% endif %}
    </tbody>
</table>
