<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_settings_payment_detail %}
<sw-page class="sw-settings-payment-detail">

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_payment_detail_header %}
    <template #smart-bar-header>
        <h2>{{ placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.textHeadline')) }}</h2>
    </template>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_payment_detail_actions %}
    <template #smart-bar-actions>
        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_payment_detail_actions_abort %}
        <sw-button
            v-tooltip.bottom="tooltipCancel"
            :disabled="isLoading || undefined"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </sw-button>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_settings_payment_detail_actions_save %}
        <sw-button-process
            v-tooltip.bottom="tooltipSave"
            class="sw-payment-detail__save-action"
            :is-loading="isLoading"
            :process-success="isSaveSuccessful"
            :disabled="isLoading || !acl.can('payment.editor') || undefined"
            variant="primary"
            @update:process-success="saveFinish"
            @click.prevent="onSave"
        >
            {{ $tc('sw-settings-payment.detail.buttonSave') }}
        </sw-button-process>
        {% endblock %}
    </template>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_payment_detail_language_switch %}
    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            @on-change="onChangeLanguage"
        />
    </template>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_settings_payment_detail_content %}
    <template #content>
        <sw-card-view>
            <template v-if="isLoading">
                <sw-skeleton />
                <sw-skeleton />
            </template>

            <template v-else>
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_product_stream_detail_content_language_info %}
                <sw-language-info
                    :entity-description="placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.textHeadline'))"
                />
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_payment_detail_content_card %}
                <sw-card
                    position-identifier="sw-settings-payment-detail-content"
                    :title="$tc('sw-settings-payment.detail.titleCard')"
                    :is-loading="isLoading"
                >
                    <template v-if="!isLoading">
                        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                        {% block sw_settings_payment_detail_content_field_plugin %}
                        <sw-plugin-box
                            v-if="!!paymentMethod.pluginId"
                            :plugin-id="paymentMethod.pluginId"
                        />
                        {% endblock %}

                        <sw-container
                            columns="3fr 3fr 1fr"
                            gap="0px 30px"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_content_field_name %}
                            <sw-text-field
                                v-model:value="paymentMethod.name"
                                name="sw-field--paymentMethod-name"
                                class="sw-settings-payment-detail__field-name"
                                required
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelName')"
                                :placeholder="placeholder(paymentMethod, 'name', $tc('sw-settings-payment.detail.placeholderName'))"
                                :error="paymentMethodNameError"
                            />
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_content_field_technical_name %}
                            <sw-text-field
                                v-model:value="paymentMethod.technicalName"
                                name="sw-field--paymentMethod-technicalName"
                                class="sw-settings-payment-detail__field-technical-name"
                                :required="feature.isActive('v6.7.0.0')"
                                :disabled="!acl.can('payment.editor') || technicalNameIsProvided || undefined"
                                :label="$tc('sw-settings-payment.detail.labelTechnicalName')"
                                :placeholder="placeholder(paymentMethod, 'technicalName', $tc('sw-settings-payment.detail.placeholderTechnicalName'))"
                                :error="paymentMethodTechnicalNameError"
                                :help-text="$tc('sw-settings-payment.detail.helpTextTechnicalName')"
                                :class="!paymentMethod.technicalName ? 'has--warning' : ''"
                            >
                                <template #hint>
                                    <span v-if="technicalNameIsProvided">{{ $tc('sw-settings-payment.detail.hintTextTechnicalNameIsProvided', { name: paymentMethod.translated.name ?? paymentMethod.name }) }}</span>
                                    {# @deprecated tag:v6.7.0 - can be removed: with technical names now required. Also remove the snippet and dynamic class has--warning #}
                                    <span v-else-if="!paymentMethod.technicalName">{{ $tc('sw-settings-payment.detail.hintTextTechnicalName') }}</span>
                                </template>
                            </sw-text-field>
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_content_field_position %}
                            <sw-number-field
                                v-model:value="paymentMethod.position"
                                name="sw-field--paymentMethod-position"
                                class="sw-settings-payment-detail__field-position"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelPosition')"
                                :placeholder="$tc('sw-settings-payment.detail.placeholderPosition')"
                            />
                            {% endblock %}
                        </sw-container>

                        <sw-container
                            columns="repeat(auto-fit, minmax(250px, 1fr))"
                            gap="0px 30px"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_base_content_field_description %}
                            <sw-textarea-field
                                v-model:value="paymentMethod.description"
                                name="sw-field--paymentMethod-description"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :value="paymentMethod.description"
                                class="sw-settings-payment-detail__description"
                                :label="$tc('sw-settings-payment.detail.labelDescription')"
                                :placeholder="placeholder(paymentMethod, 'description', $tc('sw-settings-payment.detail.placeholderDescription'))"
                            />
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_base_content_media_upload %}
                            <sw-upload-listener
                                :upload-tag="uploadTag"
                                auto-upload
                                @media-upload-finish="setMediaItem"
                            />
                            <sw-media-upload-v2
                                :disabled="!acl.can('payment.editor') || undefined"
                                :upload-tag="uploadTag"
                                :source="mediaItem"
                                class="sw-settings-payment-detail__logo-image-upload"
                                :allow-multi-select="false"
                                variant="regular"
                                :label="$tc('sw-settings-payment.detail.labelLogoUpload')"
                                :default-folder="paymentMethod.getEntityName()"
                                @media-drop="onDropMedia"
                                @media-upload-sidebar-open="openMediaSidebar"
                                @media-upload-remove-image="onUnlinkLogo"
                            />
                            {% endblock %}
                        </sw-container>

                        <sw-container
                            columns="repeat(auto-fit, minmax(250px, 2fr))"
                            gap="0px 30px"
                        >
                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_content_field_active %}
                            <sw-switch-field
                                v-model:value="paymentMethod.active"
                                name="sw-field--paymentMethod-active"
                                class="sw-settings-payment-detail__field-active"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelActive')"
                            />
                            {% endblock %}

                            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                            {% block sw_settings_payment_detail_content_field_after_order_enabled %}
                            <sw-switch-field
                                v-model:value="paymentMethod.afterOrderEnabled"
                                name="sw-field--paymentMethod-afterOrderEnabled"
                                class="sw-settings-payment-detail__field-after-order"
                                :disabled="!acl.can('payment.editor') || undefined"
                                :label="$tc('sw-settings-payment.detail.labelAfterOrderEnabled')"
                            />
                            {% endblock %}
                        </sw-container>
                    </template>
                </sw-card>
                {% endblock %}

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_payment_detail_top_rule %}
                <sw-card
                    class="sw-settings-payment-detail__condition_container"
                    position-identifier="sw-settings-payment-detail-condition-container"
                    :title="$tc('sw-settings-payment.detail.topRule')"
                    :is-loading="isLoading"
                >
                    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                    {% block sw_settings_payment_detail_top_rule_select %}
                    <sw-select-rule-create
                        v-if="!isLoading"
                        class="sw-settings-payment-detail__field-availability-rule"
                        :disabled="!acl.can('payment.editor') || undefined"
                        :rule-id="paymentMethod.availabilityRuleId"
                        :rule-filter="ruleFilter"
                        :placeholder="$tc('sw-settings-payment.detail.placeholderAvailabilityRule')"
                        rule-aware-group-key="paymentMethods"
                        @save-rule="onSaveRule"
                        @dismiss-rule="onDismissRule"
                    />
                    {% endblock %}
                </sw-card>
                {% endblock %}

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

                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_settings_payment_detail_delete_payment_method %}
                <sw-card
                    v-if="!isNewPaymentMethod && acl.can('payment.deleter')"
                    position-identifier="sw-settings-payment-detail-delete"
                    class="sw-settings-payment-detail-delete"
                    :title="$tc('sw-settings-payment.detail.delete.textHeadline')"
                    :is-loading="isLoading"
                >
                    <sw-alert
                        v-if="forbidDelete"
                        variant="info"
                    >
                        {{ $tc('sw-settings-payment.detail.delete.textAlert') }}
                    </sw-alert>

                    <div class="sw-settings-payment-detail-delete__container">
                        <sw-button
                            variant="ghost-danger"
                            :disabled="forbidDelete || !acl.can('payment.deleter') || undefined"
                            @click="showDeleteModal = true"
                        >
                            {{ $tc('sw-settings-payment.detail.delete.textButton') }}
                        </sw-button>
                    </div>
                </sw-card>
                {% endblock %}

                {% block sw_settings_payment_detail_delete_modal %}
                <sw-modal
                    v-if="showDeleteModal && acl.can('payment.deleter')"
                    :title="$tc('global.default.warning')"
                    variant="default"
                    @modal-close="showDeleteModal = false"
                >

                    {% block sw_settings_payment_detail_delete_modal_info %}
                    <div class="sw_theme_manager__confirm-delete-text">
                        <p class="text-secondary">
                            {{ $tc('sw-settings-payment.detail.delete.modal.textConfirmation') }}
                        </p>
                    </div>
                    {% endblock %}

                    {% block sw_settings_payment_detail_delete_modal_footer %}
                    <template #modal-footer>
                        {% block sw_settings_payment_detail_reset_modal_cancel %}
                        <sw-button
                            size="small"
                            @click="showDeleteModal = false"
                        >
                            {{ $tc('global.default.cancel') }}
                        </sw-button>
                        {% endblock %}

                        {% block sw_settings_payment_detail_reset_modal_confirm %}
                        <sw-button
                            :disabled="deletionInProcess || undefined"
                            variant="danger"
                            size="small"
                            @click="deletePaymentMethod"
                        >
                            {{ $tc('sw-settings-payment.detail.delete.modal.buttonDelete') }}
                        </sw-button>
                        {% endblock %}
                    </template>
                    {% endblock %}
                </sw-modal>
                {% endblock %}
            </template>
        </sw-card-view>
    </template>
    {% endblock %}

    <template #sidebar>
        <sw-sidebar :propagate-width="true">
            <sw-sidebar-media-item ref="mediaSidebarItem">
                <template
                    #context-menu-items="media"
                >
                    <sw-context-menu-item @click="setMediaFromSidebar(media.mediaItem)">
                        {{ $tc('sw-settings-payment.detail.sidebar.labelUseAsLogo') }}
                    </sw-context-menu-item>
                </template>
            </sw-sidebar-media-item>
        </sw-sidebar>
    </template>

</sw-page>
{% endblock %}
