{% extends "layout.html" %}
{% block title%}KernelCare.ePortal{% endblock %}
{% block body -%}
    <div id="controls" class="row">
        <div class="col-md-8 col-md-offset-1">
            <fieldset>
                <legend>Key inventory</legend>
                <form action="{{ url_for('main.add_key') }}" method="POST" class="form-inline" role="form">
                    <div class="form-group">
                        <label class="sr-only" for="key-field">Key</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-tag"></span>
                            </span>
                            <input type="text" name="key-field" id="key-field" class="form-control" placeholder="enter key">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="description-field">Description</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-comment"></span>
                            </span>
                            <input type="text" name="description-field" id="description-field" class="form-control" placeholder="enter description">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="sr-only" for="max-servers-field">Max Servers</label>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-pushpin"></span>
                            </span>
                            <input type="text" name="max-servers-field" id="max-servers-field" class="form-control" placeholder="max servers (0- unlimited)">
                        </div>
                    </div>
                    <div class="form-group">
                       <button class="btn btn-default" type="submit">Add</button>
                    </div>
                </form>
            </fieldset>
        </div>
    </div>
    <div id="data" class="row">
        <div class="col-md-8 col-md-offset-1">
            <div class="panel panel-default">
            {% if kc_keys|length == 0 %}
                <div class="panel-body">No keys available</div>
            {% else %}
                <div class="panel-heading">Available keys</div>
                <div id="data-pagination-wrapper">
                    <table id="key_table">
                        <thead>
                            <tr>
                                <th>#</th><th>Key</th><th>Description</th><th>Server count/limit</th><th></th>
                            </tr>
                        </thead>
                        <tbody>
                        {% for key in kc_keys %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td><a href="{{ url_for('main.show_servers', key=key.key) }}">{{ key.key }}</a></td>
                                <td>{{ key.note }}</td>
                                <td>{{ key.server_count() }}/{% if key.server_limit == 0 %}unlimited{% else %}{{ key.server_limit }}{% endif %}</td>
                                <td><a href="{{ url_for('main.delete_key', key=key.key) }}"><span class="text-danger"><span class="glyphicon glyphicon-remove"></span></span></a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
        <script type="text/javascript">
    $(document).ready( function() {
        var table = $('#key_table').DataTable({
                    paging: true,
                    searching: true,
                    ordering: true
        } );

    });


    </script>

            {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock -%}