{% extends "base.html" %}

{% block content %}
    {% for env in envs %}
        <div class="row">
            <div class="col s6 offset-s3">
                <div class="card">
                    <div class="card-content">
                        <span class="card-title"><a href="{{ env['url'] }}">{{ env['name'] }}</a> <div class="env-status right" data-url="{{ env['url'] }}"></div></span>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}

    <script>
        $(document).ready(function() {

            function update_statuses() {
                $(".env-status").each(function(idx, item) {
                    let url = $(this).data("url");
                    $.ajax({
                        url: "{{ url_for('main.server_status') }}",
                        type: "POST",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({"url": url}),
                        success: function(data, status) {
                            if (data.status === "UP") {
                                $(item).html('<i class="material-icons green-text">done</i>');
                            } else {
                                $(item).html('<i class="material-icons red-text">error_outline</i>');
                            }
                        }
                    });
                })
            }

            update_statuses();

            var interval_status = setInterval(update_statuses, 5000);
        });
    </script>
{% endblock %}