{% import "system/macro/form/confirmation.html.twig" as form_confirmation %}
{% 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 "service-group/macro/service-group-table.html.twig" as service_group_table %}
        {% import "system/macro/card/card-heading.html.twig" as card_heading %}

        {% block mainHeader %}
            {{ card_heading.component({
                title: localized.headline.serviceGroups,
                buttonText: localized.global.button.addNew,
                buttonLink: wpNonceUrl("?page=#{controllerId}&action=edit&id=-1", "#{controllerId}--1-edit"),
            }, localized) }}
        {% endblock %}
        {% block mainContent %}
            {{ service_group_table.component({
                controllerId: controllerId,
                serviceGroups: data.serviceGroups,
            }, 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: 'purposeServiceGroups', expanded: true } %}
                                {% block title %}
                                    {{ localized.thingsToKnow.headlinePurposeServiceGroups | raw }}
                                {% endblock %}
                                {% block content %}
                                    {{ localized.thingsToKnow.purposeServiceGroupsExplained | raw }}
                                {% endblock %}
                            {% endembed %}

                            {% embed "system/embed/accordion/accordion.html.twig" with { id: 'symbolsExplained' } %}
                                {% import "system/macro/icons/edit.html.twig" as edit_icon %}
                                {% import "system/macro/icons/switch-off.html.twig" as switch_off %}
                                {% import "system/macro/icons/switch-on.html.twig" as switch_on %}
                                {% import "system/macro/icons/trash.html.twig" as trash_icon %}

                                {% block title %}
                                    {{ localized.thingsToKnow.headlineSymbolsExplained | raw }}
                                {% endblock %}
                                {% block content %}
                                    <ul class="bc-space-y-2 bc-text-left">
                                        <li>{{ switch_on.component({ color: 'bc-text-white', invertSlider: true }) }} {{ localized.thingsToKnow.symbolExplainedActive | raw }}</li>
                                        <li>{{ switch_off.component({ color: 'bc-text-white' }) }} {{ localized.thingsToKnow.symbolExplainedInactive | raw }}</li>
                                        <li>{{ trash_icon.component({}) }} {{ localized.thingsToKnow.symbolExplainedDelete | raw }}</li>
                                        <li>{{ edit_icon.component({}) }} {{ localized.thingsToKnow.symbolExplainedEdit | raw }}</li>
                                    </ul>
                                {% endblock %}
                            {% endembed %}
                        {% endblock %}
                    {% endembed %}
                {% endblock %}
            {% endembed %}
        {% endblock %}
    {% endembed %}
    <!-- Reset Service Groups -->
    <hr>
    {{ form_confirmation.component({
        action: 'reset',
        headline: localized.headline.resetDefaultServiceGroups,
        hint: localized.hint.reset,
        nonce: wpNonceField("#{controllerId}-reset"),
        route: "?page=#{controllerId}",
    }, localized) }}
{% endif %}
