<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_property_detail_base %}
<sw-card
    v-if="propertyGroup"
    position-identifier="sw-property-detail-base"
    :title="$tc('sw-property.detail.cardTitleGroupInfo')"
    :is-loading="isLoading"
>

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_property_detail_base_name %}
    <sw-text-field
        v-model:value="propertyGroup.name"
        name="sw-field--propertyGroup-name"
        required
        :error="propertyGroupNameError"
        :label="$tc('sw-property.detail.labelName')"
        :placeholder="placeholder(propertyGroup, 'name', $tc('sw-property.detail.placeholderName'))"
        :disabled="!allowEdit"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_property_detail_base_description %}
    <sw-textarea-field
        v-model:value="propertyGroup.description"
        name="sw-field--propertyGroup-description"
        :label="$tc('sw-property.detail.labelDescription')"
        :placeholder="placeholder(propertyGroup, 'description', $tc('sw-property.detail.placeholderDescription'))"
        :disabled="!allowEdit"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_property_detail_filter_visible_container %}
    <sw-container
        columns="repeat(2, 1fr)"
        gap="0px 30px"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_property_detail_base_filterable %}
        <sw-switch-field
            v-model:value="propertyGroup.filterable"
            name="propertyGroupFilterable"
            class="sw-property-detail__filterable"
            :label="$tc('sw-property.detail.labelFilterable')"
            :disabled="!allowEdit"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_property_detail_base_visible_on_detail %}
        <sw-switch-field
            v-model:value="propertyGroup.visibleOnProductDetailPage"
            name="propertyGroupvisibleOnProductDetailPage"
            class="sw-property-detail__visible-on-detail"
            :label="$tc('sw-property.detail.labelvisibleOnProductDetailPage')"
            :disabled="!allowEdit"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_property_detail_sorting_display_container %}
    <sw-container
        columns="repeat(3, 1fr)"
        gap="0px 30px"
    >
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_property_detail_display_type %}
        <sw-select-field
            v-model:value="propertyGroup.displayType"
            name="sw-field--propertyGroup-displayType"
            validation="required"
            required
            :label="$tc('sw-property.detail.labelDisplayType')"
            :disabled="!allowEdit"
        >
            <option
                v-for="option in displayTypes"
                :key="option.value"
                :value="option.value"
            >
                {{ option.label }}
            </option>
        </sw-select-field>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_property_detail_sorting_type %}
        <sw-select-field
            v-model:value="propertyGroup.sortingType"
            name="sw-field--propertyGroup-sortingType"
            validation="required"
            :disabled="!allowEdit"
            required
            :label="$tc('sw-property.detail.labelSortingType')"
        >
            <option
                v-for="option in sortingTypes"
                :key="option.value"
                :value="option.value"
            >
                {{ option.label }}
            </option>
        </sw-select-field>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_property_detail_position %}
        <sw-number-field
            v-model:value="propertyGroup.position"
            name="sw-field--propertyGroup-position"
            pattern="[0-9]"
            :step="1"
            :label="$tc('sw-property.detail.labelPosition')"
            :disabled="!allowEdit"
            :placeholder="$tc('sw-property.detail.placeholderPosition')"
        />
        {% endblock %}
    </sw-container>
    {% endblock %}
</sw-card>
{% endblock %}
