{% block vrpayment_settings %}
    <sw-page class="vrpayment-settings">

        {% block vrpayment_settings_header %}
            <template #smart-bar-header>
                <h2>
                    {{ $tc('sw-settings.index.title') }}
                    <mt-icon name="small-arrow-medium-right" size="16px"></mt-icon>
                    {{ $tc('vrpayment-settings.header') }}
                </h2>
            </template>
        {% endblock %}

        {% block vrpayment_settings_actions %}
            <template #smart-bar-actions>
                {% block vrpayment_settings_actions_save %}
                    <mt-button
                            v-model:value="isSaveSuccessful"
                            class="sw-settings-login-registration__save-action"
                            variant="primary"
                            :isLoading="isLoading"
                            :disabled="isLoading"
                            @click="onSave">
                        {{ $tc('vrpayment-settings.settingForm.save') }}
                    </mt-button>
                {% endblock %}
            </template>
        {% endblock %}

        {% block vrpayment_settings_content %}
            <template #content>

                {% block vrpayment_settings_content_card %}
                    <mt-card-view>

                        {% block vrpayment_settings_content_card_channel_config %}
                            <sw-sales-channel-config v-model:value="config"
                                                        ref="configComponent"
                                                        :domain="CONFIG_DOMAIN">

                                {% block vrpayment_settings_content_card_channel_config_sales_channel %}
                                    <template #select="{ onInput, selectedSalesChannelId, salesChannel }">

                                        {% block vrpayment_settings_content_card_channel_config_sales_channel_card %}
                                            <mt-card title="Sales Channel Switch">

                                                {% block vrpayment_settings_content_card_channel_config_sales_channel_card_title %}
                                                    <sw-single-select
                                                            :value="selectedSalesChannelId"
                                                            :options="salesChannel.map(sc => ({ id: sc.id, name: sc.translated.name }))"
                                                            labelProperty="name"
                                                            valueProperty="id"
                                                            :isLoading="isLoading"
                                                            @update:value="onInput"
                                                    />
                                                {% endblock %}
                                                {% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer %}
                                                    <template #footer>

                                                        {% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container %}
                                                            <sw-container columns="2fr 1fr" gap="0px 30px">

                                                                {% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container_text %}
                                                                    <p>{{ $tc('vrpayment-settings.salesChannelCard.button.description') }}</p>
                                                                {% endblock %}

                                                                {% block vrpayment_settings_content_card_channel_config_sales_channel_card_footer_container_button %}
                                                                    <sw-button
                                                                            variant="primary"
                                                                            v-model:value="isSetDefaultPaymentSuccessful"
                                                                            :isLoading="isSettingDefaultPaymentMethods"
                                                                            @click="onSetPaymentMethodDefault">
                                                                        {{ $tc('vrpayment-settings.salesChannelCard.button.label') }}
                                                                    </sw-button>
                                                                {% endblock %}
                                                            </sw-container>
                                                        {% endblock %}
                                                    </template>
                                                {% endblock %}
                                            </mt-card>
                                        {% endblock %}
                                    </template>
                                {% endblock %}

                                {% block vrpayment_settings_content_card_channel_config_cards %}
                                    <template #content="{ actualConfigData, allConfigs, selectedSalesChannelId }">
                                        <div v-if="actualConfigData">

                                            <sw-vrpayment-credentials
                                                    :actualConfigData="actualConfigData"
                                                    :allConfigs="allConfigs"
                                                    :selectedSalesChannelId="selectedSalesChannelId"
                                                    :spaceIdErrorState="spaceIdErrorState"
                                                    :userIdErrorState="userIdErrorState"
                                                    :applicationKeyErrorState="applicationKeyErrorState"
                                                    :spaceIdFilled="spaceIdFilled"
                                                    :userIdFilled="userIdFilled"
                                                    :applicationKeyFilled="applicationKeyFilled"
                                                    :isLoading="isLoading"
                                                    :isTesting="isTesting"
                                                    @check-api-connection-event="onCheckApiConnection"
                                            ></sw-vrpayment-credentials>

                                            <sw-vrpayment-options
                                                    :actualConfigData="actualConfigData"
                                                    :allConfigs="allConfigs"
                                                    :isLoading="isLoading"
                                                    :selectedSalesChannelId="selectedSalesChannelId"
                                            >
                                            </sw-vrpayment-options>

                                            <sw-vrpayment-storefront-options
                                                    :actualConfigData="actualConfigData"
                                                    :allConfigs="allConfigs"
                                                    :isLoading="isLoading"
                                                    :selectedSalesChannelId="selectedSalesChannelId"
                                            >
                                            </sw-vrpayment-storefront-options>

                                            <sw-vrpayment-advanced-options
                                                    :actualConfigData="actualConfigData"
                                                    :allConfigs="allConfigs"
                                                    :isLoading="isLoading"
                                                    :selectedSalesChannelId="selectedSalesChannelId"
                                            >
                                            </sw-vrpayment-advanced-options>


                                        </div>
                                    </template>
                                {% endblock %}

                            </sw-sales-channel-config>
                        {% endblock %}

                        {% block vrpayment_settings_content_card_loading %}
                            <mt-loader v-if="isLoading"></mt-loader>
                        {% endblock %}
                    </mt-card-view>
                {% endblock %}

            </template>
        {% endblock %}
    </sw-page>
{% endblock %}
