{% import "system/macro/navigation/breadcrumb.html.twig" as breadcrumb %}

{% if not isPluginUnlocked() %}
    {{ messages() | raw }}
{% else %}
    {{ breadcrumb.component({
        items: [localized.breadcrumb.module]}, localized)
    }}

    {{ messages() | raw }}

    {% embed "system/embed/card/card-with-info-panel-below.html.twig" %}
        {% import "compatibility-patch/macro/compatibility-patch-table.html.twig" as compatibility_patch_table %}
        {% import "system/macro/card/card-heading.html.twig" as card_heading %}
        {% import "system/macro/navigation/pagination.html.twig" as pagination %}

        {% block mainHeader %}
            <form action="{{ "?page=#{controllerId}" }}" method="post" class="needs-validation bc-group/form" novalidate>
                {{ card_heading.component({
                    title: localized.headline.compatibilityPatches,
                    searchNonce: wpNonceField("#{controllerId}-search"),
                    searchPlaceholder: localized.placeholder.search,
                    searchTerm: data.searchTerm ? data.searchTerm : '',
                    showSearch: true,
                }, localized) }}
            </form>
        {% endblock %}

        {% block mainContent %}
            {{ compatibility_patch_table.component({
                controllerId: controllerId,
                compatibilityPatchesDetailsList: data.compatibilityPatchesDetailsList,
            }, localized) }}
            {{ pagination.component({
                controllerId: controllerId,
                pagination: data.pagination,
            }, localized) }}
        {% endblock %}

        {% block infoPanelHeader %}
            {{ localized.global.headline.thingsToKnow | raw }}
        {% endblock %}

        {% block infoPanelContent %}
            {% embed "system/embed/accordion/accordion-group.html.twig" %}
                {% block content %}
                    {% embed "system/embed/accordion/accordion-group.html.twig" %}
                        {% block content %}
                            {% embed "system/embed/accordion/accordion.html.twig" with { id: 'purposeCompatibilityPatches', expanded: true } %}
                                {% block title %}
                                    {{ localized.thingsToKnow.headlinePurposeCompatibilityPatches | raw }}
                                {% endblock %}
                                {% block content %}
                                    <p>{{ localized.thingsToKnow.purposeCompatibilityPatchesA | raw }}</p>
                                    <p>{{ localized.thingsToKnow.purposeCompatibilityPatchesB | raw }}</p>
                                {% endblock %}
                            {% endembed %}

                            {% embed "system/embed/accordion/accordion.html.twig" with {id: 'accordionSymbolsExplained'} %}
                                {% import "system/macro/icons/check-circle.html.twig" as check_circle_icon %}
                                {% import "system/macro/icons/details.html.twig" as details_icon %}
                                {% import "system/macro/icons/x-circle.html.twig" as x_circle_icon %}
                                {% block title %}
                                    {{ localized.thingsToKnow.headlineSymbolsExplained | raw }}
                                {% endblock %}
                                {% block content %}
                                    <ul class="bc-space-y-2 bc-text-left">
                                        <li>{{ check_circle_icon.component({}) }} {{ localized.thingsToKnow.valid | raw }}</li>
                                        <li>{{ x_circle_icon.component({}) }} {{ localized.thingsToKnow.invalid | raw }}</li>
                                        <li>{{ details_icon.component({}) }} {{ localized.thingsToKnow.details | raw }}</li>
                                    </ul>
                                {% endblock %}
                            {% endembed %}
                        {% endblock %}
                    {% endembed %}
                {% endblock %}
            {% endembed %}
        {% endblock %}
    {% endembed %}
{% endif %}
