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

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

{% set crumbs = [
    { label: craft.freeform.name, url: url("freeform") },
    { label: "Settings"|t("freeform"), url: url("freeform/settings") },
] %}

{% set title = "Craft 4 Preflight"|t("freeform") %}

{% macro boolColor(bool, yes, no) %}
    {% if bool %}
        <span class="green">{{ yes|t('freeform') }}</span>
    {% else %}
        <span class="red">{{ no|t('freeform') }}</span>
    {% endif %}
{% endmacro %}

{% macro renderItems(items) %}
    <ul>
        {% for key, item in items %}
            <li>
                {% if item is iterable %}
                    <h3>{{ key }}</h3>
                    {{ _self.renderItems(item) }}
                {% else %}
                        {{ item.markup }}
                        {% if item.notices %}
                            <ul class="notices">
                                {% for notice in item.notices %}
                                    <li class="{{ notice.type == 'WarningNoticeValidator' ? 'warning' }}">
                                        {% if notice.type == 'WarningNoticeValidator' %}
                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" 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>
                                        {% else %}
                                            <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" class="svg-inline--fa fa-lightbulb fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" 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 %}

                                        {{ notice.message }}
                                    </li>
                                {% endfor %}
                            </ul>
                        {% endif %}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endmacro %}

{% block content %}

    {{ parent() }}

    <h2 class="first">{{ "Craft 4 Preflight"|t('freeform') }}</h2>

    {% if not warnings|length %}
        <div class="banner banner-info">
            <div class="checkmark-icon"></div>
            <div>
                <div class="heading">{{ "Ready to go!"|t('freeform') }}</div>
                <p>{{ "None of the checks failed. Freeform is ready to be upgraded to Freeform 4."|t('freeform') }}</p>
            </div>
        </div>
    {% endif %}

    {% if warnings|length %}
        <div class="banner banner-warning">
            <h2>
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" 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>
                {{ warnings|length }} {{ "Warnings"|t('freeform') }}
            </h2>
            <ul>
                {% for item in warnings %}
                    <li>
                        <h4>{{ item.heading }}</h4>
                        <p>{{ item.message }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

    {% if suggestions|length %}
        <div class="banner banner-suggestions">
            <h2>
                <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lightbulb" class="svg-inline--fa fa-lightbulb fa-w-11" role="img" xmlns="http://www.w3.org/2000/svg" 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>
                {{ suggestions|length }} {{ "Important Notes"|t('freeform') }}
            </h2>
            <ul>
                {% for item in suggestions %}
                    <li>
                        <h4>{{ item.heading }}</h4>
                        <p>{{ item.message }}</p>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}

{% endblock %}