@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" style="min-height: 36rem;">
        <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="2">
                <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>
        <p class="mb-5 font-medium text-gray-900 dark:text-white">Choose the pickup option for the product</p>
        <div class="mb-6 flex sm:gap-5 flex-col sm:flex-row gap-4">
            <div class="e-card pt-3 rounded-lg shadow-none border-transparent">
                <div class="e-card-content e-bigger grow !pt-1">
                    <ejs-radiobutton label="Express Courier - $19" checked="true" name="pickupOptions" value="0" aria-label="express courier option costing $19" role="radio"></ejs-radiobutton>
                    <p class="text-gray-700 dark:text-gray-300 text-sm ml-7 mt-1">Send it by tomorrow.</p>
                </div>
            </div>
            <div class="e-card pt-3 rounded-lg shadow-none border-transparent">
                <div class="e-card-content e-bigger grow !pt-1">
                    <ejs-radiobutton label="Store Pickup - Free" name="pickupOptions" value="1" aria-label="store pickup option with no additional cost" role="radio"></ejs-radiobutton>
                    <p class="text-gray-700 dark:text-gray-300 text-sm ml-7 mt-1">Send it by today.</p>
                </div>
            </div>
            <div class="e-card pt-3 rounded-lg shadow-none border-transparent">
                <div class="e-card-content e-bigger grow !pt-1">
                    <ejs-radiobutton label="FedEx - $39" name="pickupOptions" value="2" aria-label="FedEx shipping option costing $39" role="radio"></ejs-radiobutton>
                    <p class="text-gray-700 dark:text-gray-300 text-sm ml-7 mt-1">Send it by 02/02/2024.</p>
                </div>
            </div>
        </div>
        <ejs-message class="mb-6 items-center" [showIcon]="false" showCloseIcon="true" content="If you opt for FedEx automated pickup, follow the instructions for a seamless return process."></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="min-height: 36rem; 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="2">
                <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>
        <p class="h6 mb-3 fw-bold text-body">Choose the pickup option for the product</p>
        <div class="mb-4 d-flex flex-column flex-sm-row gap-3 e-bigger">
            <div class="e-card rounded shadow-none">
                <div class="e-card-content flex-grow-1">
                    <ejs-radiobutton label="Express Courier - $19" checked="true" name="pickupOptions" value="0" aria-label="express courier option costing $19" role="radio"></ejs-radiobutton>
                    <p class="ms-4 mt-2 mb-0 ps-1 text-body-secondary">Send it by tomorrow.</p>
                </div>
            </div>
            <div class="e-card rounded shadow-none">
                <div class="e-card-content flex-grow-1">
                    <ejs-radiobutton label="Store Pickup - Free" name="pickupOptions" value="1" aria-label="store pickup option with no additional cost" role="radio"></ejs-radiobutton>
                    <p class="ms-4 mt-2 mb-0 ps-1 text-body-secondary">Send it by today.</p>
                </div>
            </div>
            <div class="e-card rounded shadow-none">
                <div class="e-card-content flex-grow-1">
                    <ejs-radiobutton label="FedEx - $39" name="pickupOptions" value="2" aria-label="FedEx shipping option costing $39" role="radio"></ejs-radiobutton>
                    <p class="ms-4 mt-2 mb-0 ps-1 text-body-secondary">Send it by 02/02/2024.</p>
                </div>
            </div>
        </div>
        <ejs-message class="mb-4 align-items-center" [showIcon]="false" showCloseIcon="true" content="If you opt for FedEx automated pickup, follow the instructions for a seamless return process."></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>

}