<div class="widgetBody system-check">
    {% if not numErrors and not numWarnings %}
        <p class="system-success"><span class="icon-ok"></span> {{ 'Installation_SystemCheckNoErrorsOrWarnings'|translate }}</p>
    {% endif %}

    {% if numErrors %}
        <ul>
            {% for error in errors %}
                <li title="{{ error.getLongErrorMessage|default(error.getItems()[0].getComment())|e('html_attr') }}" class="system-check-widget-error"><span class="icon-error"></span> {{ error.getLabel }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {% if numWarnings %}
        <ul>
            {% for warning in warnings %}
                <li title="{{ warning.getLongErrorMessage|default(warning.getItems()[0].getComment())|e('html_attr') }}" class="system-check-widget-warning"><span class="icon-warning"></span> {{ warning.getLabel }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {% if numErrors or numWarnings %}
        <p>
            <br />
            <a href="{{ linkTo({'module': 'Installation', 'action': 'systemCheckPage'}) }}"
            >{{ 'Installation_SystemCheckViewFullSystemCheck'|translate }}</a>
        </p>
    {% endif %}

    <script>
        jQuery(function () {
            $('.widgetBody.system-check').tooltip({
                track: true,
                content: function() {
                    var $this = $(this);
                    if ($this.attr('piwik-field') === '') {
                        // do not show it for form fields
                        return '';
                    }

                    var title = $(this).attr('title');
                    return piwikHelper.escape(title.replace(/\n/g, '<br />'));
                },
                show: {delay: 200, duration: 100},
                hide: false
            });
        });
    </script>
</div>