<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_settings_rule_detail_base %}
<div class="sw-settings-rule-detail-base">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_rule_detail_base_content_card %}
    <sw-card
        position-identifier="sw-settings-rule-detail-base-content"
        :large="true"
        :is-loading="isLoading"
        :title="$tc('sw-settings-rule.detail.titleCard')"
    >
        <template v-if="rule">
            <div style="display: grid; grid-template-columns: 2fr 1fr; grid-column-gap: 32px">
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_rule_detail_base_content_card_field_name %}
                <sw-text-field
                    v-model:value="rule.name"
                    name="sw-field--rule-name"
                    :label="$tc('sw-settings-rule.detail.labelName')"
                    :placeholder="$tc('sw-settings-rule.detail.placeholderName')"
                    :error="ruleNameError"
                    :disabled="!acl.can('rule.editor') || undefined"
                    required
                />
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_rule_detail_base_content_card_field_priority %}
                <sw-number-field
                    v-model:value="rule.priority"
                    name="sw-field--rule-priority"
                    :label="$tc('sw-settings-rule.detail.labelPriority')"
                    :placeholder="$tc('sw-settings-rule.detail.placeholderPriority')"
                    :error="rulePriorityError"
                    :disabled="!acl.can('rule.editor') || undefined"
                    required
                />
                {% endblock %}
            </div>

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_settings_rule_detail_base_content_card_field_description %}
            <sw-textarea-field
                v-model:value="rule.description"
                name="sw-field--rule-description"
                :label="$tc('sw-settings-rule.detail.labelDescription')"
                :placeholder="$tc('sw-settings-rule.detail.placeholderDescription')"
                :disabled="!acl.can('rule.editor') || undefined"
            />
            {% endblock %}

            <div style="display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 32px">
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_rule_detail_base_content_card_field_type %}
                <sw-multi-select
                    v-if="rule"
                    v-model:value="moduleTypes"
                    name="sw-field--moduleTypes"
                    class="sw-settings-rule-detail__type-field"
                    value-property="id"
                    label-property="name"
                    :label="$tc('sw-settings-rule.detail.labelType')"
                    :disabled="!acl.can('rule.editor') || undefined"
                    :options="availableModuleTypes"
                >
                    <template #selection-label-property="{ item }">
                        {{ $tc(item.name) }}
                    </template>

                    <template #result-label-property="{ item }">
                        {{ $tc(item.name) }}
                    </template>
                </sw-multi-select>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_rule_detail_base_content_card_field_tags %}
                <sw-entity-tag-select
                    v-if="rule"
                    v-model:entityCollection="rule.tags"
                    name="sw-field--rule-tags"
                    class="sw-settings-rule-detail__tags-field"
                    :label="$tc('global.sw-tag-field.title')"
                    :disabled="!acl.can('rule.editor') || undefined"
                    :placeholder="$tc('sw-settings-rule.detail.placeholderTags')"
                />
                {% endblock %}
            </div>
        </template>
        <sw-loader v-else />
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_rule_detail_base_conditions_card %}
    <sw-card
        class="sw-settings-rule-detail__condition_container"
        position-identifier="sw-settings-rule-detail-base-conditions"
        :large="true"
        :is-loading="isLoading"
        :title="$tc('sw-settings-rule.detail.ruleCard')"
    >
        <template #header-right>
            <sw-extension-teaser-popover
                position-identifier="sw-settings-rule-preview-mode-switch"
            />
        </template>

        <sw-condition-tree
            :initial-conditions="conditions"
            :condition-repository="conditionRepository"
            :condition-data-provider-service="ruleConditionDataProviderService"
            association-field="ruleId"
            :association-value="rule.id"
            :association-entity="rule"
            :root-condition="null"
            :disabled="!acl.can('rule.editor') || undefined"
            @conditions-changed="$emit('conditions-changed', $event)"
            @initial-loading-done="$emit('tree-finished-loading')"
        />
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_rule_detail_custom_field_sets %}
    <sw-card
        v-if="showCustomFields"
        position-identifier="sw-settings-rule-detail-base-custom-field-sets"
        :large="true"
        :title="$tc('sw-settings-custom-field.general.mainMenuItemGeneral')"
        :is-loading="isLoading"
    >
        <sw-custom-field-set-renderer
            :entity="rule"
            :disabled="!acl.can('rule.editor') || undefined"
            :sets="customFieldSets"
        />
    </sw-card>
    {% endblock %}
</div>
{% endblock %}
