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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="flex flex-col lg:flex-row md:min-h-screen">
        <div class="w-full lg:w-7/12 p-0">
            <img class="w-full h-full object-cover" src="assets/images/authentication/split-screen/split-screen.png" alt="image" />
        </div>
        <div class="w-full lg:w-5/12">
            <div class="flex justify-center">
                <div class="w-full max-w-md rounded-lg p-4 p-md-6 py-12">
                    <div class="flex justify-center mb-6">
                        <img class="mr-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                        <h2 class="text-center text-xl text-gray-900 dark:text-white font-semibold">Company Name</h2>
                    </div>
                    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white text-center mb-2">Login with mobile number</h2>
                    <p class="text-md text-center text-gray-700 px-5 dark:text-gray-300">Please confirm your country code and enter your mobile number</p>
                    <form action="#" class="mt-6" onsubmit="event.preventDefault();">
                        <div class="flex space-x-4">
                            <div class="w-1/3">
                                <label class="block text-sm mb-1 font-medium text-gray-700 dark:text-gray-300">Country code</label>
                                <ejs-dropdownlist class="e-bigger" placeholder="+1" (beforeOpen)="$event.cancel = true;" aria-label="choose your country code" role="listbox"></ejs-dropdownlist>
                            </div>
                            <div class="w-2/3">
                                <label class="block text-sm mb-1 font-medium text-gray-700 dark:text-gray-300">Mobile number</label>
                                <ejs-maskedtextbox class="e-bigger" mask="9999999999" promptChar=" " placeholder="432 432 4321" aria-label="enter your mobile number" role="textbox"></ejs-maskedtextbox>
                            </div>
                        </div>
                        <div class="e-bigger mt-6">
                            <button ejs-button class="w-full text-lg e-primary e-btn" type="submit" aria-label="continue" role="button">Continue</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

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

<section>
    <div class="d-flex flex-column flex-lg-row min-vh-100">
        <div class="col-12 col-lg-7 p-0">
            <img class="img-fluid w-100 h-100" src="assets/images/authentication/split-screen/split-screen.png" style="max-height: 100%; max-width: 100%; object-fit: cover;" alt="image" />
        </div>
        <div class="col-12 col-lg-5 p-0">
            <div class="d-flex justify-content-center bg-body">
                <div class="w-100 max-w-md bg-body rounded-lg p-4 py-5" style="max-width: 450px;">
                    <div>
                        <div class="d-flex justify-content-center mb-4">
                            <div class="d-flex align-items-center justify-content-center">
                                <img class="me-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                                <h2 class="text-center text-body fs-5 fw-bold mb-0">Company Name</h2>
                            </div>
                        </div>
                        <h2 class="text-center fs-4 text-body fw-bold mb-2">Login with mobile number</h2>
                        <p class="text-center text-light-emphasis px-3">Please confirm your country code and enter your mobile number</p>
                    </div>
                    <form action="#" class="mt-4" onsubmit="event.preventDefault();">
                        <div class="d-flex justify-content-center gap-3 row p-0">
                            <div class="col-4 col-lg-3 p-0">
                                <label class="form-label fw-medium text-dark-emphasis small">Country code</label>
                                <ejs-dropdownlist class="e-bigger" placeholder="+1" (beforeOpen)="$event.cancel = true;" aria-label="choose your country code" role="listbox"></ejs-dropdownlist>
                            </div>
                            <div class="col-7 col-lg-8 m-0">
                                <label class="form-label fw-medium text-dark-emphasis small">Mobile number</label>
                                <ejs-maskedtextbox class="e-bigger" mask="9999999999" promptChar=" " placeholder="432 432 4321" aria-label="enter your mobile number" role="textbox"></ejs-maskedtextbox>
                            </div>
                        </div>
                        <div class="mt-4 e-bigger">
                            <button ejs-button class="e-btn e-block e-primary" type="submit" aria-label="continue" role="button">Continue</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

}