{% embed "system/embed/card/card-with-title.html.twig" %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block header %}
        {{ card_heading.component({
            title: localized.headline.pluginUpdatesAndDebugging,
        }) }}
    {% endblock %}
    {% block content %}
        {% import "system/macro/row/save.html.twig" as row_save %}
        {% import "system/macro/row/select.html.twig" as row_select %}
        {% import "system/macro/row/switch-button.html.twig" as row_switch_button %}

        <form action="{{ "?page=#{controllerId}" }}" method="post" class="needs-validation bc-group/form" novalidate>
            {{ row_select.component({
                hint: localized.hint.automaticUpdateA
                    ~ localized.hint.automaticUpdateB
                    ~ localized.hint.automaticUpdateC
                    ~ localized.hint.automaticUpdateD
                    ~ " "
                    ~ localized.hint.automaticUpdateE
                    ~ localized.hint.automaticUpdateF,
                id: 'automaticUpdate',
                label: localized.field.automaticUpdate,
                options: enum.automaticUpdateOptions.list,
                value: data.pluginConfig.automaticUpdate.value,
            }) }}

            {{ row_switch_button.component({
                hint: localized.hint.enableDebugLogging,
                id: 'enableDebugLogging',
                label: localized.field.enableDebugLogging,
                value: data.pluginConfig.enableDebugLogging,
            }) }}

            {{ row_switch_button.component({
                hint: localized.hint.enableDebugConsole,
                id: 'enableDebugConsole',
                label: localized.field.enableDebugConsole,
                value: data.pluginConfig.enableDebugConsole,
            }) }}

            {{ row_save.component({
                action: 'save',
                button: localized.global.button.save,
                nonce: wpNonceField("#{controllerId}-save")
            }, localized) }}
        </form>
    {% endblock %}
{% endembed %}
