{% extends "base.html" %}

{% block content %}
<div class="row data justify-content-between">
    <div class="col col-4">
        <h3>nodes</h3>
    </div>
    <div class="col col-4">
        <div class="float-right">
            <span data-toggle="tooltip" data-placement="right" title="Recheck all IP addresses of all nodes">
                <button type="button" class="btn btn-outline-primary btn-sm" onClick="backfillips(this);">Backfill IP addresses</button>
            </span>
        </div>
    </div>
</div>
<hr>
<table id="nodes" class="display" style="width:100%">
    <thead>
        <tr>
            <th>name</th>
            <th>user</th>
            <th>expire</th>
            <th>last activity</th>
            <th>addresses</th>
            <th>online</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
{% for node in nodes %}
        <tr>
            <td>
                <a class="plain" href="{{ url_for('main.node', nodeId=node.id)}}">
                <span data-toggle="tooltip" data-placement="right" title="{{ node.ipAddresses | join('\n') }}">
                    {{node.givenName}}
                </span>
                </a>
            </td>
            <td>
                <a class="plain" href="{{ url_for('main.user', userName=node.user.name)}}">
                    {{node.user.name}}
                </a>
            </td>
            <td>
                <span data-toggle="tooltip" data-placement="right"
                    title="{{ node.expiry | fmt_datetime }}"
                    class="{% if node.expired %}expired{% endif %}">
                    {{node.expireDate | htime_dt | safe}}
                </span>
            </td>
            <td data-order="{{ node.lastSeen | fmt_datetime }}">
                <span data-toggle="tooltip" data-placement="right" title="{{ node.lastSeen | fmt_datetime }}">
                    {{node.lastSeen | htime_dt }}
                </span>
            </td>
            <td>
                {{ node.ipAddresses | join(', ') }}
            </td>
            <td data-filter="{{ node.online | fancyOnline }}">
                {{node.online | fancyBool | safe}}
            </td>
            <td class="no-sort">
                {% if node.expireDate and not node.expired %}
                <span data-toggle="tooltip" data-placement="right" title="expire/disconnect">
                    <a class="nodeco" href="{{ url_for('rest.expireNode', nodeId=node.id) }}">
                        <i class="fas fa-plug"></i>
                    </a>
                </span>
                {% else %}
                    <i class="fas fa-plug disabled"></i>
                {% endif %}
                <span data-toggle="tooltip" data-placement="right" title="delete">
                    <a class="nodeco" href="{{ url_for('rest.deleteNode', nodeId=node.id) }}">
                        <i class="fas fa-trash"></i>
                    </a>
                </span>
            </td>
        </tr>
{% endfor %}
</tbody>
</table>

{% endblock %}

{% block scripts %}
<script>
    $(function () {
        new DataTable('#nodes', {
            paging: true,
            lengthMenu: [15, 30, 50, 100, { label: 'All', value: -1 }],
            pageLength: 30,
            fixedHeader: false,
            select: false,
            keys: false,
            aoColumnDefs: [
              { 'bSortable': false, 'aTargets': [ -1 ] }
           ],
           columnDefs: [
               {
                   target: 4,
                   visible: false,
                   searchable: true
               }
            ]
        });
    })
</script>
{% endblock %}