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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="flex justify-center min-h-screen">
        <div class="w-full max-w-md rounded-lg p-6 py-12">
            <div class="flex justify-center mb-6">
                <div class="flex items-center justify-center">
                    <img class="mr-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <h2 class="text-center text-xl font-semibold text-gray-900 dark:text-white">Company Name</h2>
                </div>
            </div>
            <h2 class="text-2xl font-semibold text-center mb-2 text-gray-900 dark:text-white">Unlock your session</h2>
            <p class="text-md text-center text-gray-700 dark:text-gray-300">Your session is locked due to inactivity</p>
            <form action="#" class="mt-6 mb-6" onsubmit="event.preventDefault();">
                <div class="mb-4">
                    <label class="block text-sm mb-1 font-medium text-gray-700 dark:text-gray-300">Email</label>
                    <ejs-textbox class="py-2 e-bigger" type="email" placeholder="Email" floatLabelType="Never" aria-label="enter your email address" role="textbox"></ejs-textbox>
                </div>
            </form>
            <div class="e-bigger">
                <button ejs-button class="w-full text-lg e-primary e-btn" type="submit" aria-label="click to unlock your session" role="button">Unlock your session</button>
            </div>
            <span class="flex items-center justify-center gap-2 mt-7">
                <p class="text-center text-gray-900 dark:text-white">Return to</p>
                <a href="javascript:void(0);" class="text-primary-600 dark:text-primary-400 font-medium text-base p-0" aria-label="sign in" role="link">Sign in</a>
            </span>
        </div>
    </div>
</section>

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

<section class="d-flex justify-content-center bg-body min-vh-100">
    <div class="bg-body rounded-lg p-4 py-5 w-100" style="max-width: 450px;">
        <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 fs-5 text-body fw-bold mb-0">Company Name</h2>
            </div>
        </div>
        <h2 class="text-center text-body fs-4 fw-bold mb-2">Unlock your session</h2>
        <p class="text-center text-light-emphasis m-0">Your session is locked due to inactivity</p>
        <form action="#" class="mt-4 mb-4" onsubmit="event.preventDefault();">
            <div class="mb-3">
                <label class="form-label fw-medium text-dark-emphasis small">Email</label>
                <ejs-textbox class="py-2 e-bigger" type="email" placeholder="Email" floatLabelType="Never" aria-label="enter your email address" role="textbox"></ejs-textbox>
            </div>
        </form>
        <div class="e-bigger">
            <button ejs-button class="e-btn e-block e-primary" type="submit" aria-label="click to unlock your session" role="button">Unlock your session</button>
        </div>
        <div class="d-flex align-items-center justify-content-center gap-1 mt-4">
            <p class="text-center mb-0 text-body">Return to</p>
            <a href="javascript:void(0);" class="text-primary p-0 text-decoration-none fs-6 fw-medium" aria-label="sign in" role="link">Sign in</a>
        </div>
    </div>
</section>

}