{% embed "system/embed/card/card-with-info-panel.html.twig" %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block mainHeader %}
        {{ card_heading.component({
            title: localized.headline.cookieSettings,
        }) }}
    {% endblock %}
    {% block mainContent %}
        {% import "system/macro/row/switch-button.html.twig" as row_switch_button %}
        {% import "system/macro/row/input.html.twig" as row_input %}
        {% import "system/macro/row/select.html.twig" as row_select %}
        {% import "system/macro/row/save.html.twig" as row_save %}
        {% import "system/macro/row/textarea.html.twig" as row_textarea %}

        {{ row_switch_button.component({
            dataAttribute: 'data-brlbs-disable="cookieDomain,cookiePath" data-brlbs-disable-on="true"',
            hint: localized.hint.automaticCookieDomainAndPath,
            id: 'automaticCookieDomainAndPath',
            label: localized.field.automaticCookieDomainAndPath,
            value: data.automaticCookieDomainAndPath,
        }) }}

        {{ row_input.component({
            alert: cookieDomainIsDifferent ? localized.alert.cookieDomainIsDifferent : '',
            errorMessage: localized.validation.cookieDomain,
            hint: localized.hint.cookieDomain,
            id: 'cookieDomain',
            isDisabled: data.automaticCookieDomainAndPath,
            label: localized.field.cookieDomain,
            value: data.cookieDomain,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.cookiePath,
            hint: localized.hint.cookiePath,
            id: 'cookiePath',
            isDisabled: data.automaticCookieDomainAndPath,
            label: localized.field.cookiePath,
            value: data.cookiePath,
        }) }}

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

        {{ row_select.component({
            id: 'cookieSameSite',
            hint: localized.hint.cookieSameSite,
            label: localized.field.cookieSameSite,
            name: 'cookieSameSite',
            options: enum.sameSite.list,
            value: data.cookieSameSite,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.cookieLifetime,
            hint: localized.hint.cookieLifetime,
            id: 'cookieLifetime',
            label: localized.field.cookieLifetime,
            type: 'number',
            value: data.cookieLifetime,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.cookieLifetimeEssentialOnly,
            hint: localized.hint.cookieLifetimeEssentialOnly,
            id: 'cookieLifetimeEssentialOnly',
            label: localized.field.cookieLifetimeEssentialOnly,
            type: 'number',
            value: data.cookieLifetimeEssentialOnly,
        }) }}

        {{ row_textarea.component({
            hint: localized.hint.crossCookieDomains,
            id: 'crossCookieDomains',
            isRequired: false,
            label: localized.field.crossCookieDomains,
            value: data.crossCookieDomains | join('\n'),
        }) }}

        {{ row_save.component({
            action: 'save',
        }, 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.html.twig" with {id: 'accordionCrossDomain', expanded: true} %}
                    {% block title %}
                        {{ localized.thingsToKnow.headlineCrossCookieDomains | raw }}
                    {% endblock %}
                    {% block content %}
                        <p>{{ localized.thingsToKnow.crossCookieDomainsA | raw }}</p>
                        <p class="bc-text-center">{{ localized.thingsToKnow.crossCookieDomainsB | format(localized.url.crossCookieDomains) | raw }}</p>
                    {% endblock %}
                {% endembed %}
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}
