<!DOCTYPE html>

<html lang="en">
<head>
        <?php echo view('partials/title-meta', array('title' => 'Layouts')) ?> <?= $this->include('partials/head-css') ?>
    </head>
<body>
<div class="wrapper">
            <?php echo view('partials/topbar', array('subtitle' => 'Forms', 'title' => 'Layouts')) ?> <?= $this->include('partials/sidenav') ?>

            <!-- Start Page Content here -->
<div class="page-content">
<main>
                    <?php echo view('partials/page-title', array('subtitle' => 'Forms', 'title' => 'Layouts')) ?>

                    <div class="container">
<div class="space-y-6">
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Form</h4>
</div>
<div class="card-body">
<div class="grid md:grid-cols-2 grid-cols-1 items-center gap-7.5">
<div class="md:border-e md:border-0 border-b border-dashed border-default-300 md:pb-0 pb-4">
<div class="md:p-7.5">
<h4 class="text-lg uppercase font-bold mb-1.25">Sign in</h4>
<p class="text-default-400 mb-7.5">Let’s get you signed in. Enter your email and password to continue.</p>
<form>
<div class="mb-5">
<label class="form-label" for="userEmail">
                                                            Email address
                                                            <span class="text-danger">*</span>
</label>
<div>
<input class="form-input" id="userEmail" placeholder="you@example.com" required="" type="email"/>
</div>
</div>
<div class="mb-5">
<label class="form-label" for="userPassword">
                                                            Password
                                                            <span class="text-danger">*</span>
</label>
<div>
<input class="form-input" id="userPassword" placeholder="••••••••" required="" type="password"/>
</div>
</div>
<div class="flex flex-wrap justify-between items-start">
<div class="flex items-center gap-2">
<input class="form-checkbox border-0" id="rememberMe2" type="checkbox"/>
<label class="font-medium italic text-default-400" for="rememberMe2">Keep me signed in</label>
</div>
<button class="btn bg-primary rounded-full text-white" type="submit">
<strong>Log in</strong>
</button>
</div>
</form>
</div>
</div>
<div class="text-center">
<div class="mb-5">
<span class="btn btn-icon size-12 rounded-full bg-secondary/15">
<i class="iconify tabler--user-hexagon text-secondary size-7"></i>
</span>
</div>
<h4 class="mb-2 text-lg">Don't Have an Account Yet?</h4>
<p class="text-default-400 mb-5">Join us today and unlock access to personalized features, updates, and more!</p>
<a class="text-primary underline font-semibold" href="/auth-sign-up">Create Your Account</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Modal Form</h4>
</div>
<div class="card-body">
<div class="text-center">
<button aria-controls="modal-form" aria-expanded="false" aria-haspopup="dialog" class="btn bg-primary text-white hover:bg-primary-hover" data-hs-overlay="#modal-form" type="button">Form in simple modal box</button>
<div aria-labelledby="modal-form-label" class="hs-overlay hs-overlay-open:opacity-100 hs-overlay-open:duration-500 hidden size-full fixed top-8 start-0 z-80 opacity-0 overflow-x-hidden transition-all overflow-y-auto" id="modal-form" role="dialog" tabindex="-1">
<div class="hs-overlay-animation-target lg:w-3xl md:w-2xl w-xs mx-auto">
<div class="card">
<div class="card-body">
<div class="grid md:grid-cols-2 grid-cols-1 items-center gap-7.5">
<div class="md:border-e md:border-0 border-b border-dashed border-default-300 md:pb-0 pb-4">
<div class="md:p-7.5 text-start">
<h4 class="text-lg uppercase font-bold mb-1.25">Sign in</h4>
<p class="text-default-400 mb-7.5">Let’s get you signed in. Enter your email and password to continue.</p>
<form>
<div class="mb-5">
<label class="form-label" for="userEmail">
                                                                                Email address
                                                                                <span class="text-danger">*</span>
</label>
<div>
<input class="form-input" id="userEmail" placeholder="you@example.com" required="" type="email"/>
</div>
</div>
<div class="mb-5">
<label class="form-label" for="userPassword">
                                                                                Password
                                                                                <span class="text-danger">*</span>
</label>
<div>
<input class="form-input" id="userPassword" placeholder="••••••••" required="" type="password"/>
</div>
</div>
<div class="flex flex-wrap justify-between items-start">
<div class="flex items-center gap-2">
<input class="form-checkbox border-0" id="rememberMe1" type="checkbox"/>
<label class="font-medium italic text-default-400" for="rememberMe1">Keep me signed in</label>
</div>
<button class="btn bg-primary text-white hover:bg-primary-hover rounded-full" type="submit">
<strong>Log in</strong>
</button>
</div>
</form>
</div>
</div>
<div class="text-center">
<div class="mb-5">
<span class="btn btn-icon size-12 rounded-full bg-secondary/15">
<i class="iconify tabler--user-hexagon text-secondary size-7"></i>
</span>
</div>
<h4 class="mb-2 text-lg">Don't Have an Account Yet?</h4>
<p class="text-default-400 mb-5">Join us today and unlock access to personalized features, updates, and more!</p>
<a class="text-primary underline font-semibold" href="/auth-sign-up">Create Your Account</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Basic Example</h4>
</div>
<div class="card-body">
<form class="space-y-6">
<div>
<label class="form-label" for="exampleInputEmail1"> Email address </label>
<div>
<input class="form-input" id="exampleInputEmail1" placeholder="Enter email" required="" type="email"/>
</div>
<small class="text-xs text-default-400" id="emailHelp">We'll never share your email with anyone else.</small>
</div>
<div>
<label class="form-label" for="exampleInputPassword1"> Password </label>
<div>
<input class="form-input" id="exampleInputPassword1" placeholder="Password" required="" type="password"/>
</div>
</div>
<div class="flex items-center gap-2">
<input class="form-checkbox border-0" id="checkmeout0" type="checkbox"/>
<label class="font-medium text-default-600" for="checkmeout0">Check me out !</label>
</div>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="submit">
<strong>Submit</strong>
</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Form</h4>
</div>
<div class="card-body">
<form class="space-y-6">
<div class="grid md:grid-cols-4">
<div>
<label class="form-label" for="inputEmail3"> Email </label>
</div>
<div class="md:col-span-3">
<input class="form-input" id="inputEmail3" placeholder="Email" required="" type="email"/>
</div>
</div>
<div class="grid md:grid-cols-4">
<div>
<label class="form-label" for="inputPassword3"> Password </label>
</div>
<div class="md:col-span-3">
<input class="form-input" id="inputPassword3" placeholder="Password" required="" type="password"/>
</div>
</div>
<div class="grid md:grid-cols-4">
<div>
<label class="form-label" for="inputPassword5"> Re Password </label>
</div>
<div class="md:col-span-3">
<input class="form-input" id="inputPassword5" placeholder="Retype Password" required="" type="password"/>
</div>
</div>
<div class="grid md:grid-cols-4">
<div class="md:col-span-3 md:col-start-2">
<div class="flex items-center gap-2">
<input class="form-checkbox" id="checkmeout" type="checkbox"/>
<label class="font-medium text-default-600" for="checkmeout">Check me out !</label>
</div>
</div>
</div>
<div class="grid md:grid-cols-4">
<div class="md:col-span-3 md:col-start-2">
<button class="btn bg-info text-white hover:bg-info-hover" type="submit">
<strong>Sign in</strong>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Horizontal Form Label Sizing</h4>
</div>
<div class="card-body">
<form class="space-y-6">
<div class="grid md:grid-cols-6">
<div>
<label class="text-xs block mb-2" for="colFormLabelSm"> Email </label>
</div>
<div class="md:col-span-5">
<input class="form-input form-input-sm" id="colFormLabelSm" placeholder="col-form-label-sm" required="" type="email"/>
</div>
</div>
<div class="grid md:grid-cols-6">
<div>
<label class="form-label" for="colFormLabel"> Email </label>
</div>
<div class="md:col-span-5">
<input class="form-input" id="colFormLabel" placeholder="col-form-label" required="" type="email"/>
</div>
</div>
<div class="grid md:grid-cols-6">
<div>
<label class="text-base block mb-2" for="colFormLabelLg"> Email </label>
</div>
<div class="md:col-span-5">
<input class="form-input h-12! text-base!" id="colFormLabelLg" placeholder="col-form-label-lg" required="" type="email"/>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Inline Form</h4>
</div>
<div class="card-body">
<form class="grid lg:grid-cols-2 md:grid-cols-1 gap-3 items-center mb-5">
<div class="flex flex-wrap items-center gap-6">
<div>
<label class="sr-only hidden" for="staticEmail2">Password</label>
<input class="bg-transparent border-0 text-default-700 text-sm focus:ring-0" id="staticEmail2" readonly="" type="text" value="email@example.com"/>
</div>
<div>
<label class="sr-only hidden" for="inputPassword2">Password</label>
<input class="form-input" id="inputPassword2" placeholder="Password" type="password"/>
</div>
<div>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="submit">Confirm identity</button>
</div>
</div>
</form>
<h6 class="text-base mb-2">Auto-sizing</h6>
<form>
<div class="grid lg:grid-cols-3 md:grid-cols-1 gap-2 items-center">
<div class="lg:col-span-2 flex flex-wrap items-center gap-4">
<div>
<label class="hidden" for="inlineFormInput">Name</label>
<input class="form-input" id="inlineFormInput" placeholder="Jane Doe" type="text"/>
</div>
<div>
<label class="hidden" for="inlineFormInputGroup">Username</label>
<div class="flex">
<span class="inline-flex items-center px-3 rounded-s-md border border-default-300 bg-default-100 text-default-600 text-sm">@</span>
<input class="form-input rounded-s-none!" id="inlineFormInputGroup" placeholder="Username" type="text"/>
</div>
</div>
<div>
<div class="flex items-center gap-2">
<input class="form-checkbox" id="autoSizingCheck" type="checkbox"/>
<label class="font-medium text-default-600" for="autoSizingCheck">Check me out !</label>
</div>
</div>
<div>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Form Row</h4>
</div>
<div class="card-body">
<form>
<div class="grid md:grid-cols-6 gap-base">
<div class="md:col-span-3">
<label class="form-label" for="inputEmail4"> Email </label>
<div>
<input class="form-input" id="inputEmail4" placeholder="Email" required="" type="email"/>
</div>
</div>
<div class="md:col-span-3">
<label class="form-label" for="inputPassword4"> Password </label>
<div>
<input class="form-input" id="inputPassword4" placeholder="Password" required="" type="password"/>
</div>
</div>
<div class="md:col-span-6">
<label class="form-label" for="inputAddress"> Address </label>
<div>
<input class="form-input" id="inputAddress" placeholder="1234 Main St" required="" type="text"/>
</div>
</div>
<div class="md:col-span-6">
<label class="form-label" for="inputAddress2"> Address 2 </label>
<div>
<input class="form-input" id="inputAddress2" placeholder="Apartment, studio, or floor" required="" type="text"/>
</div>
</div>
<div class="md:col-span-3">
<label class="form-label" for="inputCity"> City </label>
<div>
<input class="form-input" id="inputCity" required="" type="text"/>
</div>
</div>
<div class="md:col-span-2">
<label class="form-label" for="inputState"> City </label>
<select class="form-input" id="inputState">
<option>Choose</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
<div class="md:col-span-1">
<label class="form-label" for="inputZip"> Zip </label>
<div>
<input class="form-input" id="inputZip" required="" type="text"/>
</div>
</div>
<div class="md:col-span-6">
<div class="flex items-center gap-2 mb-3">
<input class="form-checkbox border-0" id="customCheck11" type="checkbox"/>
<label class="font-medium text-default-600" for="customCheck11">Check this custom checkbox</label>
</div>
<button class="btn bg-primary text-white hover:bg-primary-hover" type="submit">
<strong>Sign in</strong>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Floating Labels</h4>
</div>
<div class="card-body">
<form>
<div class="grid md:grid-cols-6 gap-base">
<div class="md:col-span-3">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="usernameInput" placeholder="" type="text"/>
<label class="absolute left-3 top-2 text-default-500 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="usernameInput">Username</label>
</div>
</div>
<div class="md:col-span-3">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="fullnameInput" placeholder="" type="text"/>
<label class="absolute left-3 top-2 text-default-500 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="fullnameInput">Full Name</label>
</div>
</div>
<div class="md:col-span-2">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="phoneInput" placeholder="" type="text"/>
<label class="absolute left-3 top-2 text-default-500 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="phoneInput">Phone Number</label>
</div>
</div>
<div class="md:col-span-2">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="dobInput" placeholder="" type="date"/>
<label class="absolute left-3 top-2 text-default-500 text-xs transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="dobInput">Date of Birth</label>
</div>
</div>
<div class="md:col-span-2">
<div class="relative">
<select aria-label="Select gender" class="peer block w-full border border-default-300 rounded bg-card px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="genderSelect">
<option selected="">Choose...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
<label class="absolute left-3 top-2 text-default-500 text-xs transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="genderSelect">Gender</label>
</div>
</div>
<div class="md:col-span-4">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="addressInput" placeholder="" type="text"/>
<label class="absolute left-3 top-2 text-default-500 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="addressInput">Street Address</label>
</div>
</div>
<div class="md:col-span-2">
<div class="relative">
<select aria-label="Select state" class="peer block w-full border border-default-300 rounded bg-card px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="stateSelect">
<option selected="">Choose...</option>
<option value="1">California</option>
<option value="2">Texas</option>
<option value="3">Florida</option>
</select>
<label class="absolute left-3 top-2 text-default-500 text-xs transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="stateSelect">State</label>
</div>
</div>
<div class="md:col-span-3">
<div class="relative">
<input class="peer block bg-card w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="websiteInput" placeholder="" type="text"/>
<label class="absolute left-3 top-2 text-default-500 text-sm transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="websiteInput">Website (optional)</label>
</div>
</div>
<div class="md:col-span-3">
<div class="relative">
<textarea class="h-25 peer bg-card block w-full border border-default-300 rounded px-3 pt-5 pb-2 text-base focus:border-0 focus:ring focus:ring-default-300" id="bioTextarea" placeholder="" type="text"></textarea>
<label class="absolute left-3 top-2 text-default-500 text-sm bg-card transition-all peer-placeholder-shown:top-3.5 peer-placeholder-shown:text-default-400 peer-placeholder-shown:text-sm peer-focus:top-1.5 peer-focus:text-xs peer-focus:border-0 peer-focus:ring-0" for="bioTextarea">Short Bio</label>
</div>
</div>
<div class="md:col-span-6">
<button class="btn bg-success text-white hover:bg-success-hover" type="submit">
<strong>Create Account</strong>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>

                <?= $this->include('partials/footer') ?>
            </div>
<!-- End Page content -->
</div>

        <?= $this->include('partials/customizer') ?> <?= $this->include('partials/footer-scripts') ?>
    </body>
</html>