{% embed "system/embed/card/card-with-info-panel.html.twig" %}
    {% import "system/macro/form-component/input-group.html.twig" as input_group %}
    {% import "system/macro/row/color-duo-selection.html.twig" as row_color_duo_selection %}
    {% import "system/macro/row/save.html.twig" as row_save %}
    {% import "system/macro/card/card-heading.html.twig" as card_heading %}
    {% block mainHeader %}
        {{ card_heading.component({
            title: localized.headline.tabBarSettings,
        }) }}
    {% endblock %}
    {% block mainContent %}
        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabBackgroundColorActive',
                label: localized.field.active,
                value: data.dialogTabBarTabBackgroundColorActive,
            },
            colorB:
            {
                id: 'dialogTabBarTabBackgroundColorInactive',
                label: localized.field.inactive,
                value: data.dialogTabBarTabBackgroundColorInactive,
            },
            title: localized.field.dialogTabBarTabBackgroundColor,
        }) }}

        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabTextColorActive',
                label: localized.field.active,
                value: data.dialogTabBarTabTextColorActive,
            },
            colorB:
            {
                id: 'dialogTabBarTabTextColorInactive',
                label: localized.field.inactive,
                value: data.dialogTabBarTabTextColorInactive,
            },
            title: localized.field.dialogTabBarTabTextColor,
        }) }}

        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabBorderColorTopActive',
                label: localized.field.top,
                value: data.dialogTabBarTabBorderColorTopActive,
            },
            colorB:
            {
                id: 'dialogTabBarTabBorderColorBottomActive',
                label: localized.field.bottom,
                value: data.dialogTabBarTabBorderColorBottomActive,
            },
            title: localized.field.dialogTabBarTabBorderColorTopBottomActive,
        }) }}

        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabBorderColorLeftActive',
                label: localized.field.left,
                value: data.dialogTabBarTabBorderColorLeftActive,
            },
            colorB:
            {
                id: 'dialogTabBarTabBorderColorRightActive',
                label: localized.field.right,
                value: data.dialogTabBarTabBorderColorRightActive,
            },
            title: localized.field.dialogTabBarTabBorderColorLeftRightActive,
        }) }}

        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabBorderColorTopInactive',
                label: localized.field.top,
                value: data.dialogTabBarTabBorderColorTopInactive,
            },
            colorB:
            {
                id: 'dialogTabBarTabBorderColorBottomInactive',
                label: localized.field.bottom,
                value: data.dialogTabBarTabBorderColorBottomInactive,
            },
            title: localized.field.dialogTabBarTabBorderColorTopBottomInactive,
        }) }}

        {{ row_color_duo_selection.component({
            colorA:
            {
                id: 'dialogTabBarTabBorderColorLeftInactive',
                label: localized.field.left,
                value: data.dialogTabBarTabBorderColorLeftInactive,
            },
            colorB:
            {
                id: 'dialogTabBarTabBorderColorRightInactive',
                label: localized.field.right,
                value: data.dialogTabBarTabBorderColorRightInactive,
            },
            title: localized.field.dialogTabBarTabBorderColorLeftRightInactive,
        }) }}

        {% embed "system/embed/form-row.html.twig" %}
            {% import "system/macro/form-component/input-group.html.twig" as input_group %}
            {% block label %}
                <label>{{ localized.field.dialogTabBarTabBorderWidthActive | raw }}</label>
            {% endblock %}
            {% block input %}
                <div class="bc-relative bc-flex bc-gap-x-4">
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthTopActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthTopActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthTopActive">{{ localized.field.top | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthRightActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthRightActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthRightActive">{{ localized.field.right | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthBottomActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthBottomActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthBottomActive">{{ localized.field.bottom | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthLeftActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthLeftActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthLeftActive">{{ localized.field.left | raw }}</label>
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% import "system/macro/form-component/input-group.html.twig" as input_group %}
            {% block label %}
                <label>{{ localized.field.dialogTabBarTabBorderWidthInactive | raw }}</label>
            {% endblock %}
            {% block input %}
                <div class="bc-relative bc-flex bc-gap-x-4">
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthTopInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthTopInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthTopInactive">{{ localized.field.top | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthRightInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthRightInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthRightInactive">{{ localized.field.right | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthBottomInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthBottomInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthBottomInactive">{{ localized.field.bottom | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderWidthLeftInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderWidthLeftInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderWidthLeftInactive">{{ localized.field.left | raw }}</label>
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% import "system/macro/form-component/input-group.html.twig" as input_group %}
            {% block label %}
                <label>{{ localized.field.dialogTabBarTabBorderRadiusActive | raw }}</label>
            {% endblock %}
            {% block input %}
                <div class="bc-relative bc-flex bc-gap-x-4">
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusTopLeftActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusTopLeftActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusTopLeftActive">{{ localized.field.topLeft | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusTopRightActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusTopRightActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusTopRightActive">{{ localized.field.topRight | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusBottomLeftActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusBottomLeftActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusBottomLeftActive">{{ localized.field.bottomLeft | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusBottomRightActive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusBottomRightActive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusBottomRightActive">{{ localized.field.bottomRight | raw }}</label>
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {% embed "system/embed/form-row.html.twig" %}
            {% import "system/macro/form-component/input-group.html.twig" as input_group %}
            {% block label %}
                <label>{{ localized.field.dialogTabBarTabBorderRadiusInactive | raw }}</label>
            {% endblock %}
            {% block input %}
                <div class="bc-relative bc-flex bc-gap-x-4">
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusTopLeftInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusTopLeftInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusTopLeftInactive">{{ localized.field.topLeft | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusTopRightInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusTopRightInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusTopRightInactive">{{ localized.field.topRight | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusBottomLeftInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusBottomLeftInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusBottomLeftInactive">{{ localized.field.bottomLeft | raw }}</label>
                    </div>
                    <div class="bc-w-1/4">
                        {{ input_group.component({
                            append: 'px',
                            cssClasses: ['bc-pr-[28px]'],
                            id: 'dialogTabBarTabBorderRadiusBottomRightInactive',
                            min: 0,
                            value: data.dialogTabBarTabBorderRadiusBottomRightInactive,
                            type: 'number'
                        }) }}
                        <label class="bc-pt-2" for="dialogTabBarTabBorderRadiusBottomRightInactive">{{ localized.field.bottomRight | raw }}</label>
                    </div>
                </div>
            {% endblock %}
        {% endembed %}

        {{ 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: 'accordionTabBarSettings', expanded: true} %}
                    {% block title %}
                        {{ localized.thingsToKnow.headlineOnWhichElementsDoTheseSettingsHaveAVisualImpact | raw }}
                    {% endblock %}
                    {% block content %}
                        <p>{{ localized.thingsToKnow.onWhichElementsDoTheseSettingsHaveAVisualImpact | raw }}</p>
                        <p>
                            <a class="bc-flex bc-justify-center" data-brlbs-modal-target="borlabsModalTabBarSettings" href="#" role="button">
                                <img class="bc-w-48 bc-h-48 bc-rounded-md bc-shadow-md" src="{{ imageUrl('ttk-dialog-appearance-tab-bar-settings.png') }}" alt="">
                            </a>
                        </p>
                        {% embed "system/embed/modal/modal.html.twig" with {
                            id: 'borlabsModalTabBarSettings',
                            maxWidth: 'bc-max-w-2xl',
                            title: localized.headline.tabBarSettings,
                        } %}
                            {% 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-appearance-tab-bar-settings.png') }}" alt="">
                            {% endblock %}
                        {% endembed %}
                    {% endblock %}
                {% endembed %}
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}
