{% extends "layouts/default.html.twig" %}

{% block title %}{{ 'Test'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid" id="testpage">

        {{ include('partials/_page_header.html.twig', {header: 'Test page'|trans, description: 'Check requirements and configuration'|trans}) }}

        <table class="table table-striped">
            <caption>List of verified requirements</caption>
            <thead>
                <tr>
                    <th class="text-center">Status</th>
                    <th class="text-center">Component</th>
                    <th class="text-center">Description</th>
                </tr>
            </thead>
            {% for check in checks %}
                <tr>
                    <td class="text-center"><span class="{{ check.check_result }}"></span></td>
                    <td>{{ check.check_label }}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-secondary btn-sm"
                                data-bs-toggle="tooltip" data-bs-placement="left"
                                data-bs-custom-class="custom-tooltip"
                                data-bs-title="{{ check.check_descr }}">
                                <i class="fa-solid fa-info"></i>
                        </button>
                    </td>
                </tr>
            {% endfor %}
        </table>

        <!-- Graph testing -->
        <h4>{{ 'Graph capabilities'|trans }}</h4>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div id="{{ pie_graph_id }}">
                    <svg></svg>
                </div>
                {{ pie_graph|raw }}
            </div>
            <div class="col-xs-12 col-sm-6">
                <div id="{{ bar_chart_id }}">
                    <svg></svg>
                </div>
                {{ bar_chart|raw }}
            </div>
        </div>
    </div>
{% endblock %}