{% extends 'admin/@layout.html.twig' %}

{% set pageName = 'page_name_product_update'|trans({}, 'admin') %}

{% block rich_editor %}
    {% set downloadScript = true %}
    {{ parent() }}
    <twig:rich_editor selector=".editor-short-description"/>
    <twig:rich_editor selector=".editor-description"/>
{% endblock %}

{% block content %}
    {{ form_start(form) }}
    <div class="row" {{ stimulus_controller('product-editor') }} data-product-id="{{ product.id }}">
        <div class="col-12 text-right mb-3">
            {% if isDuplication %}
                <button class="btn btn-primary">
                    {{ 'button_duplicate'|trans({}, 'admin') }}
                </button>
            {% else %}
                <twig:FormSubmitButtonsComponent/>
            {% endif %}
        </div>
        {{ _self.productInfoPanel(product, form, mutations, weightType) }}
        <div class="col-md-12">
            <div class="card card-primary card-outline card-outline-tabs" {{ stimulus_controller('tabs') }}>
                <div class="card-header p-0 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                        <li class="nav-item">
                            <a href="#tab-description" class="nav-link active" data-target="tab-description"
                                    {{ stimulus_action('tabs', 'switch') }}>
                                {{ 'form_tab_description'|trans({}, 'admin') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tab-seo" class="nav-link"
                               data-target="tab-seo" {{ stimulus_action('tabs', 'switch') }}>
                                SEO
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tab-media" class="nav-link"
                               data-target="tab-media" {{ stimulus_action('tabs', 'switch') }}>
                                {{ 'form_tab_media'|trans({}, 'admin') }}
                            </a>
                        </li>
                        <li class="nav-item product-variant-tab {% if not product.isVariantProduct %}d-none{% endif %}">
                            <a href="#tab-variant" class="nav-link"
                               data-target="tab-variant" {{ stimulus_action('tabs', 'switch') }}>
                                {{ 'form_tab_variant'|trans({}, 'admin') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tab-parameter" class="nav-link"
                               data-target="tab-parameter" {{ stimulus_action('tabs', 'switch') }}>
                                {{ 'form_tab_parameter'|trans({}, 'admin') }}
                            </a>
                        </li>
                        <li class="nav-item">
                            <a href="#tab-category" class="nav-link"
                               data-target="tab-category" {{ stimulus_action('tabs', 'switch') }}>
                                {{ 'form_tab_category'|trans({}, 'admin') }}
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-four-tabContent">
                        <div class="tab-pane fade show active" id="tab-description">
                            {{ _self.showTranslationCard(form.productTranslations) }}
                        </div>
                        <div class="tab-pane fade" id="tab-seo">
                            {{ _self.showTranslationCard(form.seoTranslations) }}
                        </div>
                        <div class="tab-pane fade" id="tab-media">
                            {{ _self.showProductImageCard(form.productImages, form.images) }}
                        </div>
                        <div class="tab-pane fade {% if not product.isVariantProduct %}d-none{% endif %}"
                             data-controller="variant-editor"
                             id="tab-variant">
                            {{ _self.showProductVariantCard(product.productVariants, variants, product.productVariants|first, product, possibleVariantValues, availableUnits) }}
                        </div>
                        <div class="tab-pane fade" id="tab-parameter">
                            {{ _self.showProductParameterCard(form.productParameters, parameters, groupedValues, product) }}
                        </div>
                        <div class="tab-pane fade" id="tab-category">
                            {{ _self.showProductCategoryCard(categories, savedCategories) }}
                        </div>
                    </div>
                </div>
                <div class="card-footer text-right">
                    {% if isDuplication %}
                        <button class="btn btn-primary">
                            {{ 'button_duplicate'|trans({}, 'admin') }}
                        </button>
                    {% else %}
                        <twig:FormSubmitButtonsComponent/>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {#            Další hack k vykreslování productVariants 2x #}
    {#            render_reset tomu zabání, ale musí se manuálně vykreslit token. #}
    {#            #}
    {#            TODO: přijít na to zabránit dvojímu vykreslení formulářového prvku. #}
    {{ form_widget(form._token) }}
    {{ form_end(form, {'render_rest': false}) }}
{% endblock %}

{% macro showTranslationCard(productTranslations) %}
    {% for translationField in productTranslations %}
        {% set locale = translationField.vars.value.locale %}
        <style>.card[data-locale="{{ locale }}"] option:not(.{{ locale }}) {
                display: none;
            }</style>
        <div class="card" data-locale="{{ locale }}">
            <div class="card-header">
                <twig:flag mutation="{{ shop.mutation(translationField.vars.data.locale) }}" withText="true"/>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                {% for field in translationField|filter(field => field.vars.name != 'tax') %}
                    {% if locale == shop.defaultMutation.code and field.vars.name == 'name' %}
                        {{ form_row(field, {'attr': {'data-action': 'product-editor#changeName'}}) }}
                    {% else %}
                        {{ form_row(field) }}
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    {% endfor %}
{% endmacro %}

{% macro showProductImageCard(productImages, formImages) %}
    {% if productImages|length %}
        <div class="card-list row">
            {% for productImage in productImages %}
                <div class="col-3 p-2 card-item draggable" data-id="{{ productImage.vars.value.id }}">
                    <div class="card">
                        <div class="card-body">
                            <div class="image-preview">
                                <img src="{{ productImagePath(productImage.vars.value.file) }}"
                                     alt="{{ productImage.vars.value.file }}">
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="action main{% if productImage.vars.value.isMain %} text-primary{% endif %}"
                                 title="{{ 'help_mark_as_main'|trans({}, 'admin') }}"
                                    {{ stimulus_action('product-editor', 'markAsMain:stop', 'click') }}
                            >
                                <i class="fa-regular fa-square-check"></i>
                            </div>
                            <div class="action move drag-handler" title="{{ 'help_move'|trans({}, 'admin') }}">
                                <i class="fa-solid fa-up-down-left-right"></i>
                            </div>
                            <div class="action remove text-danger"
                                 title="{{ 'help_remove_image'|trans({}, 'admin') }}"
                                    {{ stimulus_action('product-editor', 'removeImage:stop', 'click') }}
                            >
                                <i class="fa-solid fa-trash"></i>
                            </div>
                        </div>
                        {{ form_row(productImage) }}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
    <label class="file-upload-placeholder">
        <span class="placeholder-text">{{ 'help_file_upload_placeholder'|trans({}, 'admin') }}</span>
        <span class="placeholder-info d-none"></span>
        {{ form_widget(formImages) }}
    </label>
{% endmacro %}

{% macro productInfoPanel(product, form, mutations, weightType) %}
    <div class="col-md-12 product-info">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <div class="card">
                            <div class="card-body">
                                <div class="image-preview">
                                    <img src="{{ product.mainImage
                                    ? productImagePath(product.mainImage.file)
                                    : asset('images/image-not-found.png') }}"
                                         alt="{{ 'help_main_image'|trans({}, 'admin') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="row">
                            <div class="col-12">
                                <h1>
                                    <a href="{{ path('eshop_product_detail', {
                                        slug: product.translation(shop.defaultMutation.code).slug
                                    }) }}" class="product-title-editable">
                                        <i class="fa-solid fa-up-right-from-square"></i>
                                        {{ product.translation(shop.defaultMutation.code).name }}
                                    </a>
                                </h1>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-code">
                                    <div class="col-6">{{ form_label(form.code) }}</div>
                                    <div class="col-6">{{ form_widget(form.code) }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row panel-price">
                                    <div class="col-6">{{ form_label(form.price) }}</div>
                                    <div class="col-6">{{ form_widget(form.price) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-in-stock">
                                    <div class="col-6">{{ form_label(form.inStock) }}</div>
                                    <div class="col-6">{{ form_widget(form.inStock) }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row panel-purchase-price">
                                    <div class="col-6">{{ form_label(form.panelPurchasePrice) }}</div>
                                    <div class="col-6">{{ form_widget(form.panelPurchasePrice) }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-in-stock">
                                    <div class="col-6">{{ form_label(form.panelUnit) }}</div>
                                    <div class="col-6">{{ form_widget(form.panelUnit) }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="row panel-ean">
                                    <div class="col-6">{{ form_label(form.ean) }}</div>
                                    <div class="col-6">
                                        {{ form_widget(form.ean) }}
                                        {{ form_errors(form.ean) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-weight">
                                    <div class="col-6">{{ form_label(form.weight) }}</div>
                                    <div class="col-6">
                                        <div class="input-group">
                                            {{ form_widget(form.weight) }}
                                            <span class="input-group-text">{{ weightType }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                {% if shop.taxPayer %}
                                    <div class="row panel-taxes">
                                        <div class="col-6">
                                            {{ 'dt.columns.tax'|trans({}, 'admin') }}
                                        </div>
                                        <div class="col-6">
                                            <style>.tax-value {
                                                    display: none;
                                                }</style>
                                            <div class="input-group">
                                                {% for translationFields in form.productTranslations %}
                                                    {% for field in translationFields|filter(field => field.vars.name == 'tax') %}
                                                        <style>.{{ translationFields.vars.data.locale }} .{{ translationFields.vars.data.locale }} {
                                                                display: block;
                                                            }</style>
                                                        <div class="grouped-left {{ translationFields.vars.data.locale }} {% if translationFields.vars.data.locale != shop.currentLocale %}d-none{% endif %}">
                                                            {{ form_widget(field) }}
                                                        </div>
                                                    {% endfor %}
                                                {% endfor %}
                                                <div class="input-group-append grouped-right">
                                                    <div class="dropdown">
                                                        <button class="btn btn-light dropdown-toggle" type="button"
                                                                id="dropdownMenuButton" data-toggle="dropdown"
                                                                aria-haspopup="true" aria-expanded="false">
                                                            <twig:flag
                                                                    mutation="{{ shop.mutation(shop.currentLocale) }}"
                                                                    translationDomain="admin"/>
                                                        </button>
                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                            {% for mutation in mutations %}
                                                                <a class="dropdown-item" href="#"
                                                                   data-action="product-editor#switchTaxMutation"
                                                                   data-mutation="{{ mutation.code }}"
                                                                >
                                                                    <twig:flag mutation="{{ mutation }}"
                                                                               translationDomain="admin"/>
                                                                    {{ mutation.name|trans({}, 'admin') }}
                                                                </a>
                                                            {% endfor %}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-variant-product">
                                    <div class="col-6">
                                        {{ form_row(form.isVariantProduct) }}
                                    </div>
                                    <div class="col-6">
                                        {{ form_row(form.toSell) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">

                            </div>
                        </div>
                        <div class="row mb-1">
                            <div class="col-6">
                                <div class="row panel-variant-product">
                                    <div class="col-12">
                                        {{ form_row(form.isEnabled) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro showProductVariantCard(productVariants, variants, firstProductVariant, product, possibleVariantValues, availableUnits) %}
    {% set variantsAreSet = productVariants|length %}
    <script>
        window.enabledVariants = [];
        {% for variantValue in product.enabledVariantValues %}
        enabledVariants.push({
            variantName: '{{ variantValue.variant.translation(shop.defaultMutation.code).name }}',
            variantId: {{ variantValue.variant.id }},
            valueName: '{{ variantValue.translation(shop.defaultMutation.code).name }}',
            valueId: {{ variantValue.variant.id }},
        });
        {% endfor %}
    </script>
    <twig:variant_value_button prototype="true"/>

    <button class="btn btn-primary btn-open-editor" data-action="variant-editor#openEditor:prevent">
        <i class="fa-solid fa-sliders"></i>
        {{ 'button_set_combination'|trans({}, 'admin') }}
    </button>
    <div class="combination-generator d-none pt-2">
        <button class="btn btn-link btn-close-editor" data-action="variant-editor#closeEditor:prevent">
            <twig:icon name="xmark"/>
        </button>
        <div class="mt-3">
            <strong>{{ 'allowed_variants'|trans({}, 'admin') }}</strong>
        </div>

        <div class="enabled-variant-container {% if not product.enabledVariantValues|length %} d-none{% endif %}">
            {% for variantValue in product.enabledVariantValues %}
                <twig:variant_value_button
                        variantId="{{ variantValue.variant.id }}"
                        variantName="{{ variantValue.variant.translation(shop.defaultMutation.code).name }}"
                        valueId="{{ variantValue.id }}"
                        valueName="{{ variantValue.translation(shop.defaultMutation.code).name }}"
                />
            {% endfor %}
        </div>

        <div class="empty-enabled-variant mt-3{% if product.enabledVariantValues|length %} d-none{% endif %}">
            <twig:alert message="no_variants_enabled" translationDomain="admin" type="warning"/>
        </div>

        <hr>

        {{ _self.showPossibleVariantValues(possibleVariantValues, product.enabledVariantValues) }}

        {% if not variants|length %}
            {{ component('alert', {
                type: 'info',
                message: ('alert_variants_not_found'|trans({'{path}': path('admin_variant_index')}, 'admin'))
            }) }}
        {% endif %}

        {% if not variantsAreSet %}
            <div class="empty-info">
                {{ component('alert', {
                    type: 'info',
                    message: ('alert_product_variants_not_found'|trans({}, 'admin'))
                }) }}
            </div>
        {% endif %}
        <div data-prototype="variant-row" class="d-none">
            <table>
                {{ _self.variantRowTemplate(availableUnits, product) }}
            </table>
        </div>
    </div>
    <table class="mt-3 product-variant-table {% if not variantsAreSet or not product.isVariantProduct %}d-none{% endif %}">
        <thead>
        <tr>
            <th class="col-2">{{ 'dt.columns.combination'|trans({}, 'admin') }}</th>
            <th class="col-2">{{ 'dt.columns.image'|trans({}, 'admin') }}</th>
            <th class="col-2">{{ 'dt.columns.extraCharge'|trans({}, 'admin') }}</th>
            <th class="col-1">{{ 'dt.columns.inStock'|trans({}, 'admin') }}</th>
            <th class="col-2">{{ 'dt.columns.unit'|trans({}, 'admin') }}</th>
            <th></th>
        </tr>
        </thead>
        <tbody class="product-variant-list">
        {% for productVariant in productVariants %}
            {{ _self.variantRowTemplate(availableUnits, product, productVariant) }}
        {% endfor %}
        </tbody>
    </table>
{% endmacro %}

{% macro variantRowTemplate(availableUnits, product, productVariant = null) %}
    {% set variantId = productVariant ? productVariant.id : 'rand_' ~ random(50, 1000) %}
    {% set variantName = productVariant ? productVariant.id : '___name___' %}
    {% set isPrototype = not productVariant %}
    <tr class="c-{{ productVariant ? productVariant.combinationsIds|join(',') : 'TODO' }}" data-id="{{ variantId }}">
        <td class="table-combination">
            <span class="breadcrumbs">{{ productVariant ? productVariant.combinationsNames(shop.currentLocale)|join(' > ') : '' }}</span>
            <input type="hidden" class="combination-id" name="edit_variant[{{ variantName }}][combination]"
                   value="{{ productVariant ? productVariant.combinationsIds|join(',') : '' }}"
                   {% if not productVariant %}disabled{% endif %}>
        </td>
        <td class="table-select-image">
            <div class="variant-image-preview{% if isPrototype or (productVariant and not productVariant.image) %} d-none{% endif %}">
                <div class="preview-body">
                    <img src="{{ productVariant and productVariant.image ? productImagePath(productVariant.image) : '' }}">
                </div>
                <div class="preview-tools">
                    <span class="image-tool edit-image"
                          data-controller="modal"
                          data-action="click->modal#open"
                          data-content="{{ path('modal_variant_image_picker', {id: product.id, variantId: variantId}) }}">
                            <twig:icon name="pencil"/>
                    </span>
                    <span class="image-tool remove-image" data-action="click->variant-editor#removeImage">
                        <twig:icon name="trash"/>
                    </span>
                    <input type="hidden" name="edit_variant[{{ variantName }}][image]"
                           value="{% if productVariant and productVariant.image %}{{ productVariant.image.id }}{% endif %}">
                </div>
            </div>
            <div class="variant-image-placeholder{% if productVariant and productVariant.image %} d-none{% endif %}">
                <twig:link_button label="button_set_picture" icon="fa-solid fa-plus"
                                  :attr="{
                    'data-controller': 'modal',
                    'data-action': 'modal#open:prevent',
                    'data-content': path('modal_variant_image_picker', {id: product.id, variantId: variantId})
                }"/>
            </div>
        </td>
        <td class="table-variant-price">
            <div class="input-group ">
                <input type="text" name="edit_variant[{{ variantName }}][price]" required="required"
                       {% if productVariant %}value="{{ productVariant.priceDivisor }}" {% endif %}
                       class="money-field form-control"
                       novalidate="novalidate" {% if not productVariant %}disabled{% endif %}>
                <span class="input-group-text">{{ shop.currentCurrency }}</span>
            </div>
        </td>
        <td class="table-stock">
            <input type="text" name="edit_variant[{{ variantName }}][inStock]" required="required" class="form-control"
                   {% if productVariant %}value="{{ productVariant.inStock }}" {% endif %}
                   novalidate="novalidate" {% if not productVariant %}disabled{% endif %}>
        </td>
        <td class="table-variant-unit">
            <select name="edit_variant[{{ variantName }}][unit]" class="form-control"
                    {% if not productVariant %}disabled{% endif %}>
                <option value="">{{ 'help_unit_choose_placeholder'|trans({}, 'admin') }}</option>
                {% for unit in availableUnits %}
                    <option value="{{ unit.id }}"
                            {% if productVariant and productVariant.unit and productVariant.unit.id == unit.id %}selected{% endif %}
                    >
                        {{ unit.translation(shop.currentLocale).name }}
                    </option>
                {% endfor %}
            </select>
        </td>
        <td class="table-actions text-right">
            ---
        </td>
    </tr>
{% endmacro %}

{% macro showPossibleVariantValues(possibleVariantValues, enabledVariantValues) %}
    <div class="possible-variants">
        {% set variantName = null %}
        {% for variantValue in possibleVariantValues %}
            {% if variantName != variantValue.variant.translation(shop.defaultMutation.code).name %}
                {% set variantName = variantValue.variant.translation(shop.defaultMutation.code).name %}
                {% set endGroup = true %}
                <div class="variant-group mb-2">
                    <strong><span class="variant-name">{{ variantName }}</span>:</strong>
                    {{ _self.showVariantValueButtons(variantValue.variant.id, possibleVariantValues, enabledVariantValues) }}
                </div>
            {% endif %}
        {% endfor %}
    </div>
{% endmacro %}

{% macro showVariantValueButtons(filterId, possibleVariantValues, enabledVariantValues) %}
    {% for variantValue in possibleVariantValues %}
        {% if filterId == variantValue.variant.id %}
            <button class="btn btn-sm btn-secondary variant-value mr-1 mb-1 {% if enabledVariantValues.contains(variantValue) %}picked{% endif %}"
                    data-variant="{{ variantValue.variant.id }}"
                    data-value="{{ variantValue.id }}"
                    data-action="variant-editor#togglePicked:prevent"
            >
                {{ variantValue.translation(shop.defaultMutation.code).name }}
            </button>
        {% endif %}
    {% endfor %}
{% endmacro %}

{% macro showProductParameterCard(formParameters, parameters, groupedValues, product) %}
    {% if not parameters|length %}
        {{ component('alert', {
            type: 'info',
            message: ('alert_parameters_not_found'|trans({'{path}': path('admin_parameter_index')}, 'admin'))
        }) }}
    {% endif %}
    <div data-prototype="{{ form_row(formParameters.vars.prototype)|e('html') }}"></div>
    {% if not formParameters.children|length %}
        {{ component('alert', {
            type: 'info',
            message: ('alert_product_parameters_not_found'|trans({}, 'admin'))
        }) }}
    {% endif %}
    {% set alreadySet = [] %}
    <table class="table">
        <thead{% if not formParameters.children|length %} class="d-none" {% endif %}>
        <tr>
            <th class="col-3">{{ 'dt.columns.parameter'|trans({}, 'admin') }}</th>
            <th class="col-3">{{ 'dt.columns.value'|trans({}, 'admin') }}</th>
            <th class="col-3"></th>
            <th class="col-3"></th>
        </tr>
        </thead>
        <tbody class="product-parameter-list">
        {% for key, productParameter in formParameters.children %}
            {% set parameterId = productParameter.vars.value.parameterValue.parameter.id %}
            {% set alreadySet = alreadySet|merge([parameterId]) %}
            <tr data-id="{{ parameterId }}">
                <td class="table-select-parameter">
                    {{ productParameter.vars.value.parameterValue.parameter.translation(shop.defaultMutation.code).name }}
                </td>
                <td class="table-select-parameter-value">
                    {{ form_errors(productParameter.parameterValue) }}
                    {{ form_widget(productParameter.parameterValue) }}
                </td>
                <td class="table-actions text-center">
                    <div class="action remove text-danger"
                         title="{{ 'help_remove_parameter'|trans({}, 'admin') }}"
                            {{ stimulus_action('product-editor', 'removeParameter:stop', 'click') }}
                    >
                        <i class="fa-solid fa-trash"></i>
                    </div>
                </td>
                <td>
                    <input type="hidden"
                           name="edit_product[productParameters][{{ key }}][product]"
                           value="{{ product.id }}">
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="row add-prototype-form{% if parameters|length == alreadySet|length %} d-none{% endif %}">
        <div class="col-3">
            <select name="parameters" class="form-control"
                    id="list-parameters">
                {% for parameter in parameters %}
                    {% if parameter.id not in alreadySet %}
                        <option value="{{ parameter.id }}">{{ parameter.translation(shop.defaultMutation.code).name }}</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <div class="col-3">
            <a class="btn btn-primary" {{ stimulus_action('product-editor', 'addParameter', 'click') }}>
                <i class="fa fa-plus"></i>
                {{ 'button_add_parameter'|trans({}, 'admin') }}
            </a>
        </div>
        <div class="parameter-value-prototype d-none">
            {% for parameterId, parameterValues in groupedValues %}
                <select name="parameterValues{{ parameterId }}"
                        class="form-control list-parameter-values parameter-{{ parameterId }}">
                    {% for parameterValue in parameterValues %}
                        {% if loop.first %}
                            {% set firstId = parameterValue.parameter.id %}
                        {% endif %}
                        <option value="{{ parameterValue.id }}"
                                class="parameter-{{ parameterValue.parameter.id }}{% if firstId != parameterValue.parameter.id %} d-none{% endif %}">
                            {{ parameterValue.translation(shop.defaultMutation.code).name }}
                        </option>
                    {% endfor %}
                </select>
            {% endfor %}
        </div>
    </div>
{% endmacro %}

{% macro showProductCategoryCard(categories, savedCategories) %}
    {% if not categories|length %}
        {{ component('alert', {
            type: 'info',
            message: ('alert_categories_not_found'|trans({'{path}': path('admin_category_index')}, 'admin'))
        }) }}
    {% endif %}
    <div class="category-tree">
        {{ _self.showCategoryBranch(categories, savedCategories, true) }}
    </div>
{% endmacro %}

{% macro showCategoryBranch(categories, savedCategories) %}
    {% if categories|length %}
        <ul>
            {% for category in categories %}
                <li>
                    <div class="form-check">

                        <input type="checkbox"
                               class="form-check-input"
                               name="productCategory[{{ category.entity.id }}]"
                               id="product-category-{{ category.entity.id }}"
                               {% if category.entity.id in savedCategories %}checked{% endif %}
                        >
                        <label for="product-category-{{ category.entity.id }}" class="form-check-label">
                            {% if category.entity.rootTag == 'product_category' %}
                                {{ 'homepage'|trans({}, 'admin') }}
                            {% else %}
                                {{ category.entity.translation(shop.defaultMutation.code).name }}
                            {% endif %}
                        </label>
                    </div>
                    {% if category.children|length %}
                        {{ _self.showCategoryBranch(category.children, savedCategories) }}
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endif %}
{% endmacro %}