{% extends "freeform/_layouts/settings" %}

{% import "_includes/forms" as forms %}

{% set title = "Diagnostics"|t("freeform") %}

{% macro renderIcon(type) %}
    {%- if type == 'WarningValidator' -%}
        <svg aria-hidden="true" viewbox="0 0 576 512">
            <path fill="currentColor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"></path>
        </svg>
    {%- elseif type == 'SuggestionValidator' -%}
        <svg aria-hidden="true" viewbox="0 0 352 512">
            <path fill="currentColor" d="M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z"></path>
        </svg>
    {%- endif -%}
{% endmacro %}

{% macro renderItems(items) %}
    <ul>
        {%- for key, item in items -%}
            {%- if item is iterable or item.markup -%}
                <li>
                    {% if item is iterable %}

                        <h3>{{ key }}</h3>
                        {{ _self.renderItems(item) }}

                    {% else %}

                        <div class="items">
                            <div class="item {{ item.validationClasses|join(' ') }}">
                                {{ item.markup }}

                                {% if item.warnings %}
                                    {{ _self.renderIcon('WarningValidator') }}
                                {% endif %}

                                {% if item.suggestions %}
                                    {{ _self.renderIcon('SuggestionValidator') }}
                                {% endif %}
                            </div>
                        </div>

                        {% if item.allValidators %}
                            <ul class="validators">
                                {% for validator in item.allValidators %}
                                    <li class="{{ validator.type|lower }}">
                                        {{ validator.message }}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}

                    {% endif %}
                </li>
            {%- endif -%}
        {%- endfor -%}
    </ul>
{% endmacro %}

{% block content %}

    {% if not warnings|length %}
        <div class="banner banner-check">
            <h2>
                <svg viewbox="0 0 32 32"><path fill="currentColor" d="M11.941 28.877 0 16.935l5.695-5.695 6.246 6.246L26.305 3.123 32 8.818z"/></svg>

                {{ "All checks passed!"|t('freeform') }}
            </h2>
        </div>
    {% endif %}

    {% for noticeType, noticeData in {'Warnings': warnings, 'Suggestions': suggestions} %}
        {% if noticeData|length %}
            <div class="banner banner-{{ noticeType|lower }}">
                <h2>
                    {{ _self.renderIcon(noticeData[0].type) }}
                    {{ noticeData|length }}
                    {{ noticeType|t('freeform') }}
                </h2>
            </div>
        {% endif %}
    {% endfor %}

    <div class="gridy">
        {% set leftSections = [
            {'title': "Server Checks"|t('freeform'), 'items': server},
            {'title': "Statistics"|t('freeform'), 'items': stats},
            {'title': "Integrations"|t('freeform'), 'items': integrations},
            {'title': "Form Types"|t('freeform'), 'items': formType}
        ] %}
        <div class="diag">
            {% for section in leftSections %}
                {% if section.items|length > 0 %}
                    <div class="diag-list">
                        <h2>{{ section.title }}</h2>
                        {{ _self.renderItems(section.items) }}
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        {% set rightSection = {'title': "Freeform Configuration"|t('freeform'), 'items': configurations} %}
        <div class="diag">
            {% if rightSection.items|length > 0 %}
                <div class="diag-list">
                    <h2>{{ rightSection.title }}</h2>
                    {{ _self.renderItems(rightSection.items) }}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}