@if (currentTheme === 'tailwind') {

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="max-w-4xl mx-auto px-4 py-6 sm:px-6 lg:px-5 sm:pt-20">
        <p class="text-lg font-medium sm:mb-6 mb-5 text-gray-900 dark:text-white">Product Return Request</p>
        <div class="sm:mb-8 mb-5" [style]="stepperStyle">
            <ejs-stepper #stepper [orientation]="stepperOrientation" [labelPosition]="labelPos" activeStep="1">
                <e-steps>
                    <e-step iconCss="e-icons e-circle-check" label="My Products"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Return Reason"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Pickup Option"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Refund Choice"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Confirmation"></e-step>
                </e-steps>
            </ejs-stepper>
        </div>
        <div>
            <p class="mb-3 font-medium text-gray-900 dark:text-white">Choose the reason for your return</p>
            <p class="mb-4 text-sm text-gray-900 dark:text-white">To assist us in addressing your request promptly, please respond to the following questions.</p>
            <div class="mb-5">
                <ejs-grid [dataSource]="data" width="100%" rowHeight="60" gridLines="None" allowTextWrap="true" class="e-bigger" [textWrapSettings]="wrapOption" role="grid">
                    <e-columns>
                        <e-column type="checkbox" width="40"></e-column>
                        <e-column field="product" headerText="Product" width="488">
                            <ng-template #template let-data>
                                <div class="flex items-center">
                                    <div class="e-avatar e-avatar-small mr-6 shrink-0">
                                        <img src="assets/images/return-block/return-reasons/{{data.product.productImage}}.png" alt="{{data.product.productName | lowercase}}" />
                                    </div>
                                    <p class="text-base text-gray-900 dark:text-white line-clamp-2">{{data.product.productName}}</p>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field="orderNumber" headerText="Order Number" width="150"></e-column>
                        <e-column field="returnTerm" headerText="Return Term" width="150" format="dd/MM/y"></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
        </div>
        <div class="flex justify-between sm:gap-5 gap-6 mb-6 flex-col sm:flex-row">
            <div class="flex flex-col justify-between sm:w-1/2 md:w-auto">
                <div class="flex flex-col gap-4 lg:mb-5 mb-4 e-bigger">
                    <p class="text-base font-medium text-gray-900 dark:text-white">What is the current state of the product?</p>
                    <div class="leading-6">
                        <ejs-radiobutton label="I want to return a sealed product" name="condition" aria-label="i want to return a sealed product" role="radio"></ejs-radiobutton>
                    </div>
                    <div class="leading-6">
                        <ejs-radiobutton label="I want to return a functional but unsealed product" name="condition" aria-label="i want to return a functional but unsealed product" role="radio"></ejs-radiobutton>
                    </div>
                    <div class="leading-6">
                        <ejs-radiobutton label="I want to return a non-functional but unsealed product" name="condition" aria-label="i want to return a non-functional but unsealed product" role="radio"></ejs-radiobutton>
                    </div>
                    <div class="leading-6">
                        <ejs-radiobutton label="The product was not delivered" name="condition" aria-label="the product was not delivered" role="radio"></ejs-radiobutton>
                    </div>
                    <div class="leading-6">
                        <ejs-radiobutton label="The product was not dispatched" name="condition" aria-label="the product was not dispatched" role="radio"></ejs-radiobutton>
                    </div>
                </div>
                <button ejs-button class="self-start" type="button" aria-label="other condition" role="button">Other Condition</button>
            </div>
            <div class="flex flex-col justify-between sm:w-1/2 md:w-auto">
                <div class="flex flex-col gap-4 lg:mb-5 mb-4 e-bigger">
                    <p class="text-base font-medium text-gray-900 dark:text-white">What is the main reason for returning the product?</p>
                    <div class="leading-6">
                        <ejs-checkbox label="Defective or damaged product" name="reason" aria-label="defective or damaged product" role="checkbox"></ejs-checkbox>
                    </div>
                    <div class="leading-6">
                        <ejs-checkbox label="Incorrect product received" name="reason" aria-label="incorrect product received" role="checkbox"></ejs-checkbox>
                    </div>
                    <div class="leading-6">
                        <ejs-checkbox label="Unsatisfactory quality" name="reason" aria-label="unsatisfactory quality" role="checkbox"></ejs-checkbox>
                    </div>
                    <div class="leading-6">
                        <ejs-checkbox label="Changed mind/not as expected" name="reason" aria-label="changed mind/not as expected" role="checkbox"></ejs-checkbox>
                    </div>
                    <div class="leading-6">
                        <ejs-checkbox label="Misleading product information" name="reason" aria-label="misleading product information" role="checkbox"></ejs-checkbox>
                    </div>
                </div>
                <button ejs-button class="self-start" type="button" aria-label="i have other reason" role="button">I have other reason</button>
            </div>
        </div>
        <ejs-message
            class="mb-6 items-center"
            severity="Info"
            [showIcon]="false"
            showCloseIcon="true"
            content="Please carefully select your reasons for returning the product, as this will help us process your request more efficiently and ensure your satisfaction with your purchase experience."
        ></ejs-message>
        <div class="flex justify-end lg:gap-3 gap-4">
            <button ejs-button class="grow sm:grow-0" type="button" aria-label="previous" role="button">Previous</button>
            <button ejs-button isPrimary="true" class="grow sm:grow-0" type="button" aria-label="next" role="button">Next</button>
        </div>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div class="container-lg py-4 px-3 px-sm-4" style="max-width: 896px;">
        <p class="h5 fw-bold mb-3 mb-sm-4 text-body">Product Return Request</p>
        <div class="mb-4" [style]="stepperStyle">
            <ejs-stepper #stepper [orientation]="stepperOrientation" [labelPosition]="labelPos" activeStep="1">
                <e-steps>
                    <e-step iconCss="e-icons e-circle-check" label="My Products"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Return Reason"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Pickup Option"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Refund Choice"></e-step>
                    <e-step iconCss="e-icons e-circle-check" label="Confirmation"></e-step>
                </e-steps>
            </ejs-stepper>
        </div>
        <div>
            <p class="h6 mb-2 fw-bold text-body">Choose the reason for your return</p>
            <p class="mb-4 text-body">To assist us in addressing your request promptly, please respond to the following questions.</p>
            <div class="mb-4">
                <ejs-grid [dataSource]="data" width="100%" rowHeight="60" gridLines="None" allowTextWrap="true" class="e-bigger" [textWrapSettings]="wrapOption" role="grid">
                    <e-columns>
                        <e-column type="checkbox" width="40"></e-column>
                        <e-column field="product" headerText="Product" width="488">
                            <ng-template #template let-data>
                                <div class="d-flex align-items-center">
                                    <div class="e-avatar e-avatar-small flex-shrink-0 rounded-1 me-4">
                                        <img src="assets/images/return-block/return-reasons/{{data.product.productImage}}.png" alt="{{data.product.productName | lowercase}}" />
                                    </div>
                                    <p class="fs-6 mb-0 lh-base text-body">{{data.product.productName}}</p>
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field="orderNumber" headerText="Order Number" width="150"></e-column>
                        <e-column field="returnTerm" headerText="Return Term" width="150" format="dd/MM/y"></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
        </div>
        <div class="d-flex justify-content-between gap-4 mb-4 mb-sm-5 flex-column flex-md-row">
            <div class="d-flex flex-column justify-content-between">
                <div class="d-flex flex-column gap-3 mb-4 mb-md-3 e-bigger">
                    <p class="h-6 lh-sm mb-0 fw-bold text-body">What is the current state of the product?</p>
                    <ejs-radiobutton label="I want to return a sealed product" name="condition" aria-label="i want to return a sealed product" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="I want to return a functional but unsealed product" name="condition" aria-label="i want to return a functional but unsealed product" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="I want to return a non-functional but unsealed product" name="condition" aria-label="i want to return a non-functional but unsealed product" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="The product was not delivered" name="condition" aria-label="the product was not delivered" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="The product was not dispatched" name="condition" aria-label="the product was not dispatched" role="radio"></ejs-radiobutton>
                </div>
                <button ejs-button class="e-outline align-self-start" type="button" aria-label="other condition" role="button">Other Condition</button>
            </div>
            <div class="d-flex flex-column justify-content-between">
                <div class="d-flex flex-column gap-3 mb-4 mb-md-3 e-bigger">
                    <p class="h-6 lh-sm mb-0 fw-bold text-body">What is the main reason for returning the product?</p>
                    <ejs-checkbox label="Defective or damaged product" name="reason" aria-label="defective or damaged product" role="checkbox"></ejs-checkbox>
                    <ejs-checkbox label="Incorrect product received" name="reason" aria-label="incorrect product received" role="checkbox"></ejs-checkbox>
                    <ejs-checkbox label="Unsatisfactory quality" name="reason" aria-label="unsatisfactory quality" role="checkbox"></ejs-checkbox>
                    <ejs-checkbox label="Changed mind/not as expected" name="reason" aria-label="changed mind/not as expected" role="checkbox"></ejs-checkbox>
                    <ejs-checkbox label="Misleading product information" name="reason" aria-label="misleading product information" role="checkbox"></ejs-checkbox>
                </div>
                <button ejs-button class="e-outline align-self-start" type="button" aria-label="i have other reason" role="button">I have other reason</button>
            </div>
        </div>
        <ejs-message
            class="mb-4 align-items-center"
            severity="Info"
            [showIcon]="false"
            showCloseIcon="true"
            content="Please carefully select your reasons for returning the product, as this will help us process your request more efficiently and ensure your satisfaction with your purchase experience."
        ></ejs-message>
        <div class="d-flex justify-content-end gap-1">
            <button ejs-button class="e-outline flex-grow-1 flex-sm-grow-0 me-2" type="button" aria-label="previous" role="button">Previous</button>
            <button ejs-button isPrimary="true" class="flex-grow-1 flex-sm-grow-0" type="button" aria-label="next" role="button">Next</button>
        </div>
    </div>
</section>

}