{% extends 'master.twig' %}

{% set title = 'Status' %}

{% block js %}
    <script>
        var yuunoStatusStates = [
            {"text": "Offline", "colour": "#800"},
            {"text": "Experiencing Issues", "colour": "#840"},
            {"text": "Online", "colour": "#080"}
        ];

        var yuunoStatusEndpoints = {{ endpoints|json_encode|raw }};

        function yuunoCheckStatus(endpoint) {
            var client = new Sakura.AJAX;
            client.SetUrl("{{ route('status.data') }}?history=0&name=" + endpoint);
            client.AddCallback(200, function () {
                var result = client.JSON(),
                    field = document.querySelector('[data-status-name="' + endpoint + '"]');

                if (result.error) {
                    if (field) {
                        field.innerText = 'error';
                    }

                    var error = new Sakura.Dialogue;
                    error.Title = "Status";
                    error.Text = result.error;
                    error.Display();
                } else {
                    var state = yuunoStatusStates[result.state];
                    field.innerText = state.text;
                    field.style.color = state.colour;
                }
            });
            client.Start(Sakura.HTTPMethod.GET);
        }

        window.addEventListener("load", function () {
            for (var i in yuunoStatusEndpoints) {
                var endpoint = yuunoStatusEndpoints[i];
                yuunoCheckStatus(endpoint);
            }
        });
    </script>
{% endblock %}

{% block content %}
    <div class="content status">
        <div class="content__header">Status</div>
        <div class="status__services">
            {% for name in endpoints %}
                <div class="status__service">
                    <h1>{{ name }}</h1>
                    <h3 data-status-name="{{ name }}">loading...</h3>
                </div>
            {% endfor %}
        </div>
        <div class="content__header">Incidents</div>
        {% for date, events in incidents %}
            <div class="news__head">{{ date }}</div>
            {% if events|length > 0 %}
                <table>
                {% for event in events %}
                    {% set state = event.state|lower %}
                    <tr>
                        <td><b><span style="font-size: .8em">{{ event.time }} UTC</span></b></td>
                        <td><b style="font-size: .8em; color: {% if state == 'resolved' %}#080{% elseif state == 'monitoring' %}#800{% else %}#840{% endif %}">{{ event.state }}</b></td>
                        <td>{{ event.comment }}</td>
                    </tr>
                {% endfor %}
                </table>
            {% else %}
                <i>No incidents occurred.</i>
            {% endif %}
        {% endfor %}
    </div>
{% endblock %}