<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_order_create_details %}
<div class="sw-order-create-details">
    <sw-loader v-if="isLoading" />

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_create_details_promotion_modal %}
    <sw-order-create-promotion-modal
        v-if="showPromotionModal"
        :is-loading="isLoading"
        :currency="currency"
        :sales-channel-id="salesChannelId"
        @close="onClosePromotionModal"
        @save="onSavePromotionModal"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_create_details_payment %}
    <sw-card
        class="sw-order-create-details__payment"
        position-identifier="sw-order-create-details-payment"
        :title="$tc('sw-order.createBase.detailsTab.labelTransactionCard')"
    >
        <sw-container
            class="sw_order_create-details__payment-container"
            gap="0px 30px"
            columns="1fr 1fr"
        >
            <sw-order-customer-address-select
                v-model:value="context.billingAddressId"
                :label="$tc('sw-order.createBase.labelBillingAddress')"
                :placeholder="$tc('sw-order.createBase.placeholderBillingAddress')"
                :same-address-value="context.shippingAddressId"
                :customer="customer"
            />

            <sw-entity-single-select
                v-model:value="context.paymentMethodId"
                entity="payment_method"
                label-property="distinguishableName"
                class="sw_order_create-details__payment-method"
                :criteria="paymentMethodCriteria"
                :label="$tc('sw-order.createBase.labelPaymentMethod')"
                :placeholder="$tc('sw-order.createBase.placeholderPaymentMethod')"
                show-clearable-button
                required
            />

            <sw-entity-single-select
                v-model:value="context.currencyId"
                class="sw_order_create-details__currency"
                entity="currency"
                :criteria="currencyCriteria"
                :label="$tc('sw-order.createBase.labelCurrency')"
                :placeholder="$tc('sw-order.createBase.placeholderCurrency')"
                show-clearable-button
                required
            />
        </sw-container>
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_create_details_shipping %}
    <sw-card
        class="sw-order-create-details__shipping"
        position-identifier="sw-order-create-details-shipping"
        :title="$tc('sw-order.createBase.detailsTab.labelDeliveryCard')"
    >
        <sw-container
            class="sw_order_create_details__shipping-container"
            gap="0px 30px"
            columns="1fr 1fr"
        >
            <sw-order-customer-address-select
                v-model:value="context.shippingAddressId"
                :label="$tc('sw-order.createBase.labelShippingAddress')"
                :placeholder="$tc('sw-order.createBase.placeholderShippingAddress')"
                :same-address-label="$tc('sw-order.initialModal.options.textSameAsBillingAddress')"
                :same-address-value="context.billingAddressId"
                :customer="customer"
            />

            <sw-entity-single-select
                v-model:value="context.shippingMethodId"
                show-clearable-button
                class="sw_order_create-details__shipping"
                entity="shipping_method"
                :criteria="shippingMethodCriteria"
                :label="$tc('sw-order.createBase.labelShippingMethod')"
                :placeholder="$tc('sw-order.createBase.placeholderShippingMethod')"
                required
            />

            <sw-number-field
                v-model:value="shippingCosts"
                :label="$tc('sw-order.createBase.labelShippingCosts')"
                :min="0"
                fill-digits
                required
            >
                <template #suffix>
                    {{ currency.symbol }}
                </template>
            </sw-number-field>

            <sw-datepicker
                v-model:value="deliveryDate"
                disabled
                hide-hint
                :label="$tc('sw-order.detailDeliveries.labelDeliveryDate')"
            />
        </sw-container>
    </sw-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_create_details_order %}
    <sw-card
        class="sw-order-create-details__order"
        position-identifier="sw-order-create-details-order"
        :title="$tc('sw-order.createBase.detailsTab.labelOrderCard')"
    >
        <sw-container
            class="sw_order_create_details__order-container"
            gap="0px 30px"
            columns="1fr 1fr"
        >
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_create_details_email %}
            <sw-text-field
                v-model:value="email"
                disabled
                class="sw-order-create-details__email"
                :label="$tc('sw-order.createBase.labelEmail')"
                :placeholder="$tc('sw-order.createBase.placeholderEmail')"
                required
            />
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_create_details_phone_number %}
            <sw-text-field
                v-model:value="phoneNumber"
                disabled
                class="sw-order-create-details__phone-number"
                :label="$tc('sw-order.createBase.labelPhoneNumber')"
                :placeholder="$tc('sw-order.createBase.placeholderPhoneNumber')"
                required
            />
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_create_details__order_sales_channel %}
            <sw-entity-single-select
                v-model:value="salesChannelId"
                disabled
                entity="sales_channel"
                class="sw-order-create-options__sales-channel"
                :label="$tc('sw-order.createBase.labelSalesChannel')"
                required
            />
            {% endblock %}

            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_order_create_details_order_language %}
            <sw-entity-single-select
                v-model:value="context.languageId"
                entity="language"
                class="sw-order-create-options__order-language"
                :criteria="languageCriteria"
                :label="$tc('sw-order.createBase.labelOrderLanguage')"
                :placeholder="$tc('sw-order.createBase.placeholderOrderLanguage')"
                show-clearable-button
                required
            />
        {% endblock %}
        </sw-container>

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_create_details_voucher_field %}
        <sw-order-promotion-tag-field
            v-model:value="promotionCodeTags"
            :disabled="!hasLineItem"
            :currency="currency"
            :label="$tc('sw-order.createBase.labelAddPromotion')"
            :placeholder="$tc('sw-order.createBase.placeholderAddPromotion')"
            :error="promotionError"
            @on-remove-code="onRemoveExistingCode"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_create_details_switch_disable_auto_promotion %}
        <sw-switch-field
            class="sw-order-create-details__disable-auto-promotion"
            :value="disabledAutoPromotion"
            :label="$tc('sw-order.createBase.labelToggleAutomaticPromotions')"
            @update:value="toggleAutomaticPromotions"
        />
        {% endblock %}
    </sw-card>
    {% endblock %}
</div>
{% endblock %}
