{% extends "layout.html" %}
{% block title%}KernelCare.ePortal{% endblock %}
{% block body -%}
    <div id="contents" class="container-fluid">
        <div id="data" class="row">
            <div class="col-md-8 col-md-offset-1">
        <span onClick="location.href='{{ url_for('main.show_keys') }}'">
                <span class="glyphicon glyphicon-circle-arrow-left"></span> Back
                </span>
                <div class="panel panel-default">
                    {% if servers.items|length == 0 %}
                        <div class="panel-body">No Servers Available</div>
                    {% else %}
                        <div class="panel-heading"><b>{{ kc_key.key }}</b> {{ kc_key.note }} usage: ({{ kc_key.server_count() }} /
                            {% if kc_key.server_limit == 0 %}unlimited{% else %}{{ kc_key.server_limit }}{% endif %})</div>
                        <div id="data-pagination-wrapper">
<!-- datatable -->
                            <table id="server_table">
                                <thead>
                                <tr>
                                    <th>IP</th><th>Hostname</th><th>Effective Kernel</th><th>Registered</th><th>Check In</th><th></th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
<!-- END OF datatable -->
                            </div>

                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    $(document).ready( function() {
        var table = $('#server_table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: true,
                    ajax: '{{  url_for('main.ajax_servers', key=kc_key.key) }}',
        		columnDefs: [ {
            			"targets": -1,
            			"data": null,
            			"defaultContent": "<span class=\"text-danger\"><span class=\"glyphicon glyphicon-remove\"></span></span>"
        			} ]
    } );
        $('#server_table tbody').on('click', '.text-danger', function() {
            var data = table.row( $(this).parents('tr')).data();
            window.location="{{ url_for('main.delete_server', key=kc_key.key, server_id='_SERVER_ID_') }}".replace("_SERVER_ID_", data[5]); 
        }); 
});

 
    </script>

{% endblock -%}