{% embed "system/embed/card/card-with-info-panel.html.twig" %}
    {% import "system/macro/row/input.html.twig" as row_input %}
    {% import "system/macro/row/save.html.twig" as row_save %}
    {% import "system/macro/row/textarea.html.twig" as row_textarea %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block mainHeader %}
        {{ card_heading.component({
            title: localized.headline.dialogDetails,
        }) }}
    {% endblock %}
    {% block mainContent %}
        {{ row_input.component({
            errorMessage: localized.validation.detailsHeadline,
            id: 'detailsHeadline',
            label: localized.field.detailsHeadline,
            value: data.detailsHeadline,
        }) }}

        {{ row_textarea.component({
            id: 'detailsDescription',
            label: localized.field.detailsDescription,
            value: data.detailsDescription,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsSaveConsentButton,
            id: 'detailsSaveConsentButton',
            label: localized.field.detailsSaveConsentButton,
            value: data.detailsSaveConsentButton,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsAcceptAllButton,
            id: 'detailsAcceptAllButton',
            label: localized.field.detailsAcceptAllButton,
            value: data.detailsAcceptAllButton,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsAcceptOnlyEssential,
            id: 'detailsAcceptOnlyEssential',
            label: localized.field.detailsAcceptOnlyEssential,
            value: data.detailsAcceptOnlyEssential,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsBackLink,
            id: 'detailsBackLink',
            label: localized.field.detailsBackLink,
            value: data.detailsBackLink,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsTabServiceGroups,
            id: 'detailsTabServiceGroups',
            label: localized.field.detailsTabServiceGroups,
            value: data.detailsTabServiceGroups,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsTabServices,
            id: 'detailsTabServices',
            label: localized.field.detailsTabServices,
            value: data.detailsTabServices,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsTabProvider,
            id: 'detailsTabProvider',
            label: localized.field.detailsTabProvider,
            value: data.detailsTabProvider,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsTabConsentHistory,
            id: 'detailsTabConsentHistory',
            label: localized.field.detailsTabConsentHistory,
            value: data.detailsTabConsentHistory,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsShowMoreInformationLink,
            id: 'detailsShowMoreInformationLink',
            label: localized.field.detailsShowMoreInformationLink,
            value: data.detailsShowMoreInformationLink,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsHideMoreInformationLink,
            id: 'detailsHideMoreInformationLink',
            label: localized.field.detailsHideMoreInformationLink,
            value: data.detailsHideMoreInformationLink,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsSwitchStatusActive,
            id: 'detailsSwitchStatusActive',
            label: localized.field.detailsSwitchStatusActive,
            value: data.detailsSwitchStatusActive,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsSwitchStatusInactive,
            id: 'detailsSwitchStatusInactive',
            label: localized.field.detailsSwitchStatusInactive,
            value: data.detailsSwitchStatusInactive,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsSelectAll,
            id: 'detailsSelectAll',
            label: localized.field.detailsSelectAll,
            value: data.detailsSelectAll,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.detailsDeselectAll,
            id: 'detailsDeselectAll',
            label: localized.field.detailsDeselectAll,
            value: data.detailsDeselectAll,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.serviceSingular,
            id: 'serviceSingular',
            label: localized.field.serviceSingular,
            value: data.serviceSingular,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.servicePlural,
            id: 'servicePlural',
            label: localized.field.servicePlural,
            value: data.servicePlural,
        }) }}

        {{ row_input.component({
            errorMessage: localized.validation.serviceSearchPlaceholder,
            id: 'serviceSearchPlaceholder',
            label: localized.field.serviceSearchPlaceholder,
            value: data.serviceSearchPlaceholder,
        }) }}

        {{ row_save.component({}, 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: 'accordionDialogDetails', expanded: true} %}
                    {% block title %}
                        {{ localized.thingsToKnow.headlineWhatIsTheDialogDetails | raw }}
                    {% endblock %}
                    {% block content %}
                        <p>{{ localized.thingsToKnow.whatIsTheDialogDetails | raw }}</p>
                        <p>
                            <a class="bc-flex bc-justify-center" data-brlbs-modal-target="borlabsModalDialogDetails" href="#" role="button">
                                <img class="bc-w-48 bc-h-48 bc-rounded-md bc-shadow-md" src="{{ imageUrl('ttk-dialog-localization-details.png') }}" alt="">
                            </a>
                        </p>
                        {% embed "system/embed/modal/modal.html.twig" with {
                            id: 'borlabsModalDialogDetails',
                            maxWidth: 'bc-max-w-2xl',
                            title: localized.headline.dialogDetails,
                        } %}
                            {% block icon %}
                                {% import "system/macro/icons/paint-brush.html.twig" as pain_brush_icon %}
                                <div class="bc-mx-auto bc-flex bc-h-12 bc-w-12 bc-flex-shrink-0 bc-items-center bc-justify-center bc-rounded-full bc-bg-gray-800 bc-text-white sm:bc-mx-0 sm:bc-h-10 sm:bc-w-10">
                                    {{ pain_brush_icon.component({}) }}
                                </div>
                            {% endblock %}

                            {% block description %}
                                <img src="{{ imageUrl('ttk-dialog-localization-details.png') }}" alt="">
                                <p>{{ localized.thingsToKnow.whatIsTheDialogDetails | raw }}</p>
                            {% endblock %}
                        {% endembed %}
                    {% endblock %}
                {% endembed %}
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}

