{% extends "layout.html" %}
{% from "loading.html" import loading_block_ui %}
{% block head %}
    <script>
        $(document).ready(function () {
            $('#load_handler_btn').on('click', function(e){
                e.preventDefault();
                $('.loading-block').removeClass('o_hide');
                $.ajax({
                    url: '/load_iot_handlers',
                }).done(function () {
                    $('.message-status').html('Handlers loaded successfully <br> Refreshing page');
                    setTimeout(function () {
                        location.reload(true);
                    }, 25000);
                }).fail(function () {
                    setTimeout(function () {
                        location.reload(true);
                    }, 25000);
                });
            });
        });
    </script>
{% endblock %}
{% block content %}
    <h2 class="text-center text-green">Interfaces list</h2>
    <table align="center" width="50%" cellpadding="3">
        {% for interfaces in interfaces_list -%}
            <tr><td>{{ interfaces }}</td></tr>
        {%- endfor %}
    </table>
    <h2 class="text-center text-green">Drivers list</h2>
    <table align="center" width="50%" cellpadding="3">
        {% for driver in drivers_list -%}
            <tr><td>{{ driver }}</td></tr>
        {%- endfor %}
    </table>
    {% if server %}
        <div style="margin-top: 20px;" class="text-center">
            <a id="load_handler_btn" class="btn" href='/load_iot_handlers'>Load handlers</a>
        </div>
        <div class="text-center font-small" style="margin: 10px auto;">
            You can clear the handlers configuration
            <form style="display: inline-block;margin-left: 4px;" action='/handlers_clear'>
                <input class="btn btn-sm" type="submit" value="Clear"/>
            </form>
        </div>
    {% endif %}
    {{ loading_block_ui('Loading Handlers') }}
{% endblock %}