<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_order_detail_details %}
<div class="sw-order-detail-details">

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_detail_details_payment %}
    <sw-order-details-state-card
        v-if="transaction"
        :title="$tc('sw-order.detailsTab.labelTransactionCard')"
        :order="order"
        :entity="transaction"
        :state-label="$tc('sw-order.stateCard.headlineTransactionState')"
        :disabled="!acl.can('order.editor') || undefined"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_payment_billing_address %}
        <sw-order-address-selection
            class="sw-order-detail-details__billing-address"
            type="billing"
            :address="billingAddress"
            :address-id="selectedBillingAddressId"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelBillingAddress')"
            @change-address="onChangeOrderAddress"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_payment_method_select %}
        <sw-entity-single-select
            v-model:value="transaction.paymentMethodId"
            entity="payment_method"
            label-property="distinguishableName"
            disabled
            :criteria="paymentMethodCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelPaymentMethod')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderPaymentMethod')"
            show-clearable-button
        />
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_detail_details_shipping %}
    <sw-order-details-state-card
        v-if="delivery"
        :title="$tc('sw-order.detailsTab.labelDeliveryCard')"
        :order="order"
        :entity="delivery"
        :state-label="$tc('sw-order.stateCard.headlineDeliveryState')"
        :disabled="!acl.can('order.editor') || undefined"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_shipping_address %}
        <sw-order-address-selection
            class="sw-order-detail-details__shipping-address"
            type="shipping"
            :address="shippingAddress"
            :address-id="selectedShippingAddressId"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelShippingAddress')"
            @change-address="onChangeOrderAddress"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_shipping_method_select %}
        <sw-entity-single-select
            v-model:value="delivery.shippingMethodId"
            entity="shipping_method"
            disabled
            :criteria="salesChannelCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelShippingMethod')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderShippingMethod')"
            show-clearable-button
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_shipping_costs %}
        <sw-number-field
            v-model:value="shippingCosts"
            class="sw-order-detail-details__shipping-cost"
            :disabled="!acl.can('order.editor')"
            fill-digits
            :label="$tc('sw-order.detailDeliveries.labelShippingCosts')"
        >
            <template #suffix>
                {{ order.currency.symbol }}
            </template>
        </sw-number-field>
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_shipping_date %}
        <sw-datepicker
            v-model:value="delivery.shippingDateEarliest"
            disabled
            hide-hint
            :label="$tc('sw-order.detailDeliveries.labelDeliveryDate')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_shipping_tracking_codes %}
        <sw-multi-tag-select
            v-model:value="delivery.trackingCodes"
            class="sw-order-user-card__tracking-code-select"
            :disabled="!acl.can('order.editor') || undefined"
            :placeholder="$tc('sw-order.detailBase.placeholderTrackingCodeSelect')"
            :label="$tc('sw-order.detailBase.labelTrackingCodes')"
            :validate="validateTrackingCode"
            @update:value="saveAndReload"
        >
            <template #message-add-data>
                <span>{{ $tc('sw-order.detailBase.addTrackingCode') }}</span>
            </template>
            <template #message-enter-valid-data>
                <span>{{ $tc('sw-order.detailBase.enterValidTrackingCode') }}</span>
            </template>
        </sw-multi-tag-select>
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_detail_details_order %}
    <sw-order-details-state-card
        :title="$tc('sw-order.detailsTab.labelOrderCard')"
        :order="order"
        :entity="order"
        :disabled="!acl.can('order.editor') || undefined"
        :state-label="$tc('sw-order.stateCard.headlineOrderState')"
        @show-status-history="showStateHistoryModal = true"
        @save-edits="onSaveEdits"
    >

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_email %}
        <sw-text-field
            v-model:value="order.orderCustomer.email"
            class="sw-order-detail-details__email"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelEmail')"
            :placeholder="$tc('sw-order.createBase.detailsBody.placeholderEmail')"
            :error="orderOrderCustomerEmailError"
            required
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_phone_number %}
        <sw-text-field
            v-model:value="order.addresses.get(order.billingAddressId).phoneNumber"
            class="sw-order-detail-details__phone-number"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.createBase.detailsBody.labelPhoneNumber')"
            :placeholder="$tc('sw-order.createBase.detailsBody.placeholderPhoneNumber')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_sales_channel %}
        <sw-entity-single-select
            v-model:value="order.salesChannelId"
            entity="sales_channel"
            disabled
            :label="$tc('sw-order.createBase.detailsFooter.labelSalesChannel')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderSalesChannel')"
            show-clearable-button
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_language %}
        <sw-entity-single-select
            v-model:value="order.languageId"
            entity="language"
            disabled
            :criteria="salesChannelCriteria"
            :label="$tc('sw-order.createBase.detailsFooter.labelOrderLanguage')"
            :placeholder="$tc('sw-order.createBase.detailsFooter.placeholderOrderLanguage')"
            show-clearable-button
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_affiliate %}
        <sw-text-field
            v-model:value="order.affiliateCode"
            class="sw-order-detail-details__affiliate-code"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.detailBase.labelAffiliateCode')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_campaign %}
        <sw-text-field
            v-model:value="order.campaignCode"
            class="sw-order-detail-details__campaign-code"
            :disabled="!acl.can('order.editor') || undefined"
            :label="$tc('sw-order.detailBase.labelCampaignCode')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_customer_comment %}
        <sw-textarea-field
            v-model:value="order.customerComment"
            class="sw-order-detail-details__customer-comment"
            :disabled="!acl.can('order.editor')"
            :label="$tc('sw-order.detailBase.labelCustomerComment')"
        />
        {% endblock %}

        <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
        {% block sw_order_detail_details_order_promotion %}
        <sw-order-promotion-field
            class="sw-order-detail-details__promotion"
            @loading-change="updateLoading"
            @reload-entity-data="reloadEntityData"
            @error="showError"
        />
        {% endblock %}

    </sw-order-details-state-card>
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_detail_details_custom_fields %}
    <sw-extension-component-section
        position-identifier="sw-order-detail-base-custom-fields__before"
    />

    <sw-card
        v-if="customFieldSets.length > 0"
        position-identifier="sw-order-detail-details-custom-fields"
        :title="$tc('sw-settings-custom-field.general.mainMenuItemGeneral')"
    >
        <sw-custom-field-set-renderer
            :entity="order"
            :disabled="!acl.can('order.editor')"
            :sets="customFieldSets"
        />
    </sw-card>

    <sw-extension-component-section
        position-identifier="sw-order-detail-base-custom-fields__after"
    />
    {% endblock %}
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_order_detail_base_state_history_modal %}
    <sw-order-state-history-modal
        v-if="showStateHistoryModal"
        :order="order"
        :is-loading="isLoading"
        @modal-close="showStateHistoryModal = false"
    />
    {% endblock %}
</div>
{% endblock %}
