sakura/resources/views/yuuno/status/index.twig

{% extends '@aitemu/master.twig' %}

{% set title = 'Status' %}
{% set banner = '/images/status-banner.png' %}
{% set banner_large = true %}

{% block banner_content %}
    <div class="banner__bottom">
        <div class="status__overall status__overall--good">
            <span class="status__overall-icon"></span> <span class="status__overall-text">all services are go!</span>
        </div>
        <div class="status__last-update">
            this is an not as static as it was before design preview
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="platform status__response">
        <div class="status__services">
            {% for name in endpoints %}
                <div class="status__service status__service--good">
                    <div class="status__service-icon"></div>
                    <div class="status__service-name">{{ name }}</div>
                </div>
            {% endfor %}
        </div>
        <div class="status__graph">graph goes here</div>
    </div>
    <div class="platform status__incidents">
        {% for date, events in incidents %}
            <div class="status__incident">
                <div class="status__incident-date">{{ date }}</div>
                <div class="status__updates">
                    {% if events|length > 0 %}
                        {% for event in events %}
                            {% set state = event.state|lower %}
                            <div class="status__update status__update--{% if state == 'resolved' %}good{% elseif state == 'monitoring' %}bad{% else %}busy{% endif %}">
                                <div class="status__update-meta">
                                    <div class="status__update-time">{{ event.time }} UTC</div>
                                    <div class="status__update-state">{{ event.state }}</div>
                                </div>
                                <div class="status__update-text">
                                    {{ event.comment }}
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="status__update status__update">
                            <div class="status__update-text">
                                No incidents occurred.
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}