<!DOCTYPE html>

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

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

                    <div class="container">
<div class="grid grid-cols-1 gap-base">
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Textfield Type</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Simple Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="simpleinput">Simple Input</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="simpleinput" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Floating Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Floating Input</label>
</div>
<div class="lg:col-span-2">
<div class="relative">
<input class="peer border-default-300 focus:border-default-500 block w-full rounded bg-transparent p-4 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 placeholder:text-transparent autofill:pt-6 autofill:pb-2 focus:pt-6 focus:pb-2 focus:ring-0 sm:text-sm" id="floatingInput" placeholder="" type="text"/>
<label class="text-default-500 peer-placeholder-shown:text-default-400 peer-placeholder-shown: absolute start-3 top-2 transition-all peer-placeholder-shown:top-3.5 peer-focus:top-1.5 peer-focus:border-0 peer-focus:text-xs peer-focus:ring-0" for="floatingInput">Name</label>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Validation Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="validInput">Valid Input</label>
</div>
<div class="lg:col-span-2">
<div class="relative">
<input aria-describedby="hs-validation-name-success-helper" class="form-input border-success!" id="validInput" name="hs-validation-name-success" required="" type="text"/>
<div class="pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3">
<i class="iconify tabler--check text-success text-base"></i>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Placeholder -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-rounded">Rounded Input</label>
</div>
<div class="lg:col-span-2">
<input class="form-input rounded-full!" id="example-rounded" placeholder="Rounded Input" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Text Area -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-textarea">Text area</label>
</div>
<div class="lg:col-span-2">
<textarea class="form-textarea" id="example-textarea" rows="5"></textarea>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Disabled -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-disable">Disabled</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" disabled="" id="example-disable" type="text" value="Disabled value"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Helping Text -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-helping">Helping text</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-helping" placeholder="Helping text" type="text"/>
<small class="text-default-400 mt-1 block text-xs">A block of help text that breaks onto a new line and may extend beyond one line.</small>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Default select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="discount">Select with Icon</label>
</div>
<div class="lg:col-span-2">
<div class="input-icon-group">
<i class="iconify tabler--discount input-icon"></i>
<select class="form-input" id="discount">
<option selected="">Choose Discount</option>
<option>No Discount</option>
<option>Flat Discount</option>
<option>Percentage Discount</option>
</select>
</div>
</div>
</div>
</div>
<div>
<!-- with Label Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Label Input</label>
</div>
<div class="lg:col-span-2">
<div>
<label class="form-label" for="labelInputInput1">Label Input</label>
<input class="form-input" id="labelInputInput1" placeholder="name@example.com" type="email"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Search Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="SearchInput">Search Style</label>
</div>
<div class="lg:col-span-2">
<div class="input-icon-group">
<i class="iconify tabler--search input-icon"></i>
<input class="form-input" id="SearchInput" placeholder="Search for something..." type="search"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Invalidation Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="inValidationInput">Invalid Input</label>
</div>
<div class="lg:col-span-2">
<div class="input-icon-group">
<input aria-describedby="hs-validation-name-success-helper" class="form-input border-danger" id="inValidationInput" name="hs-validation-name-success" required="" type="text"/>
<i class="iconify tabler--info-circle text-danger! input-icon text-base"></i>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Placeholder -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-placeholder">Placeholder</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-placeholder" placeholder="placeholder" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Readonly -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-readonly">Readonly</label>
</div>
<div class="lg:col-span-2">
<input class="form-input cursor-not-allowed" id="example-readonly" readonly="" type="text" value="Readonly value"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Static Control -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-static">Static control</label>
</div>
<div class="lg:col-span-2">
<input class="form-input border-transparent! bg-transparent!" id="example-static" readonly="" type="text" value="email@example.com"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Default select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Default Select</label>
</div>
<div class="lg:col-span-2">
<select class="form-select">
<option selected="">Open this select menu</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Multiple Select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-multiselect">Multiple Select</label>
</div>
<div class="lg:col-span-2">
<select class="form-input h-auto!" id="example-multiselect" multiple="">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Types</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Email Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-email">Email</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-email" placeholder="Email" type="email"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Show/Hide Password -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="password">Show/Hide Password</label>
</div>
<div class="lg:col-span-2">
<div class="relative flex items-center">
<input class="form-input w-full" id="password" placeholder="Enter password" type="password"/>
<button class="bg-default-100 border-default-300 absolute inset-y-0 end-0 flex items-center rounded rounded-s-none! border px-3 py-1.75" data-hs-toggle-password='{"target":"#password"}' type="button">
<i class="iconify tabler--eye hs-password-active:hidden block text-sm"></i>
<i class="iconify tabler--eye-off hs-password-active:block hidden text-sm"></i>
</button>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Time -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-time">Time</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-time" type="time"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Number -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-number">Number</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-number" name="number" type="number"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Range -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-range">Range</label>
</div>
<div class="lg:col-span-2">
<input class="form-range" id="example-range" max="100" min="0" type="range"/>
</div>
</div>
</div>
<div>
<!-- Password -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-password">Password</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-password" type="password" value="password"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Month -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-month">Month</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-month" type="month"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Week -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-week">Week</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="example-week" name="week" type="week"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Color -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="example-color">Color</label>
</div>
<div class="lg:col-span-2">
<input class="form-input h-10 p-1!" id="example-color" type="color" value="#2563eb"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Group</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Basic Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Username</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-input" placeholder="Username" type="text"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Currency Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Amount</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text">$</span>
<input class="form-input" type="text"/>
<span class="input-group-text">.00</span>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Textarea with Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Textarea</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text">With textarea</span>
<textarea class="form-textarea" rows="2"></textarea>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Flex-nowrap Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="mt-2 block font-semibold">Wrapping</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text">@</span>
<input class="form-input" placeholder="Username" type="text"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Input group with text input and button -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Input + Button</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<input class="form-input" placeholder="Recipient's username" type="text"/>
<button class="btn bg-dark text-white hover:bg-dark-hover" type="button">Button</button>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Multiple Files  -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="formFileMultiple01">Multiple Files</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="formFileMultiple01" multiple="" name="file-input" type="file"/>
</div>
</div>
</div>
<div>
<!-- Email-like Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Recipient</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<input class="form-input" placeholder="Recipient's username" type="text"/>
<span class="input-group-text">@example.com</span>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Multi-field Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Email Login</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<input class="form-input" placeholder="Username" type="text"/>
<span class="input-group-text">@</span>
<input class="form-input" placeholder="Server" type="text"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Vanity URL Input Group -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Vanity URL</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text text-nowrap">https://example.com/users/</span>
<input class="form-input" type="text"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Input group with dropdown and text input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="mt-2 block font-semibold">Dropdown + Input</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<div class="hs-dropdown relative inline-flex">
<button aria-expanded="false" aria-haspopup="menu" aria-label="Dropdown" class="hs-dropdown-toggle btn bg-primary rounded-e-none text-white hover:bg-primary-hover" type="button">
                                                                Dropdown <i class="iconify tabler--chevron-down text-base text-white"></i>
</button>
<div aria-orientation="vertical" class="hs-dropdown-menu" role="menu">
<div class="space-y-0.5">
<a class="dropdown-item" href="#!">Action</a>
<a class="dropdown-item active" href="#!">Another action</a>
<a class="dropdown-item" href="#!">Something else here</a>
</div>
</div>
</div>
<input class="form-input" type="text"/>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- File input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="inputGroupFile04">File Input</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="inputGroupFile04" name="file-input" type="file"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Input Group Select</label>
</div>
<div class="lg:col-span-2">
<div class="input-group">
<span class="input-group-text">Options</span>
<select class="form-input rounded-s-none!">
<option selected="">Choose...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Floating Labels</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Floating Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Email address</label>
</div>
<div class="lg:col-span-2">
<!-- Floating Input -->
<div class="relative">
<input class="peer border-default-300 focus:border-default-500 block w-full rounded bg-transparent p-4 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 placeholder:text-transparent autofill:pt-6 autofill:pb-2 focus:pt-6 focus:pb-2 focus:ring-0 sm:text-sm" id="hs-floating-input-email" placeholder="you@email.com" type="email"/>
<label class="peer-focus:text-default-500 peer-not-placeholder-shown:text-default-500 pointer-events-none absolute start-0 top-0 h-full origin-top-left truncate border border-transparent p-4 transition duration-100 ease-in-out peer-not-placeholder-shown:translate-x-0.5 peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:scale-90 peer-focus:translate-x-0.5 peer-focus:-translate-y-1.5 peer-focus:scale-90 sm:text-sm" for="hs-floating-input-email">Email</label>
</div>
<!-- End Floating Input -->
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Floating Textarea -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Comments</label>
</div>
<div class="lg:col-span-2">
<div class="relative">
<textarea class="peer border-default-300 focus:border-default-500 block w-full rounded bg-transparent p-4 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 placeholder:text-transparent autofill:pt-6 autofill:pb-2 focus:pt-6 focus:pb-2 focus:ring-0 sm:text-sm" id="floatingTextarea" placeholder="" rows="4"></textarea>
<label class="peer-focus:text-default-500 peer-not-placeholder-shown:text-default-500 pointer-events-none absolute start-0 top-0 h-full origin-top-left truncate border border-transparent p-4 transition duration-100 ease-in-out peer-not-placeholder-shown:translate-x-0.5 peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:scale-90 peer-focus:translate-x-0.5 peer-focus:-translate-y-1.5 peer-focus:scale-90 sm:text-sm" for="floatingTextarea">Comments</label>
</div>
</div>
</div>
</div>
<div>
<!-- Floating Password -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Password</label>
</div>
<div class="lg:col-span-2">
<div class="relative">
<input class="peer border-default-300 focus:border-default-500 block w-full rounded bg-transparent p-4 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 placeholder:text-transparent autofill:pt-6 autofill:pb-2 focus:pt-6 focus:pb-2 focus:ring-0 sm:text-sm" id="floatingPassword" placeholder="" type="password"/>
<label class="peer-focus:text-default-500 peer-not-placeholder-shown:text-default-500 pointer-events-none absolute start-0 top-0 h-full origin-top-left truncate border border-transparent p-4 transition duration-100 ease-in-out peer-not-placeholder-shown:translate-x-0.5 peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:scale-90 peer-focus:translate-x-0.5 peer-focus:-translate-y-1.5 peer-focus:scale-90 sm:text-sm" for="floatingPassword">Password</label>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Floating Select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Select Menu</label>
</div>
<div class="lg:col-span-2">
<div class="relative">
<select class="peer border-default-300 focus:border-default-500 block w-full rounded bg-transparent p-4 not-placeholder-shown:pt-6 not-placeholder-shown:pb-2 placeholder:text-transparent autofill:pt-6 autofill:pb-2 focus:pt-6 focus:pb-2 focus:ring-0 sm:text-sm" id="floatingSelect" placeholder="">
<option disabled="" selected="" value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label class="peer-focus:text-default-500 peer-not-placeholder-shown:text-default-500 pointer-events-none absolute start-0 top-0 h-full origin-top-left truncate border border-transparent p-4 transition duration-100 ease-in-out peer-not-placeholder-shown:translate-x-0.5 peer-not-placeholder-shown:-translate-y-1.5 peer-not-placeholder-shown:scale-90 peer-focus:translate-x-0.5 peer-focus:-translate-y-1.5 peer-focus:scale-90 sm:text-sm" for="floatingSelect">Works with selects</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Input Sizes</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Small Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="input-small">Small</label>
</div>
<div class="lg:col-span-2">
<input class="form-input form-input-sm" id="input-small" placeholder=".input-sm" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Large Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="input-large">Large</label>
</div>
<div class="lg:col-span-2">
<input class="form-input form-input-lg" id="input-large" placeholder=".input-lg" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Large Select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Large Select</label>
</div>
<div class="lg:col-span-2">
<select class="form-input form-input-lg">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
<div>
<!-- Normal Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="input-normal">Normal</label>
</div>
<div class="lg:col-span-2">
<input class="form-input" id="input-normal" placeholder="Normal" type="text"/>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Grid Size Input -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!" for="input-gridsize">Grid Sizes</label>
</div>
<div class="lg:col-span-2">
<div class="grid grid-cols-1 gap-2 lg:grid-cols-3">
<div>
<input class="form-input" id="input-gridsize" placeholder="col-span-4" type="text"/>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Small Select -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Small Select</label>
</div>
<div class="lg:col-span-2">
<select class="form-input form-input-sm">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h4 class="card-title">Checks, Radios and Switches</h4>
</div>
<div class="card-body">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-base">
<div>
<!-- Default Checkboxes -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Checkboxes</label>
</div>
<div class="space-y-3 lg:col-span-2">
<!-- Default Checkbox -->
<div class="flex items-center gap-2">
<input class="form-checkbox" id="checkDefault" type="checkbox"/>
<label for="checkDefault">Default Checkbox</label>
</div>
<!-- Light Checkbox -->
<div class="flex items-center gap-2">
<input class="form-checkbox bg-default-200! checked:bg-primary!" id="checkLight" type="checkbox"/>
<label for="checkLight">Light Checkbox</label>
</div>
<!-- Inline Checkboxes -->
<div class="flex items-center gap-x-4">
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox" id="checkInline1" type="checkbox"/>
<label for="checkInline1">Inline 1</label>
</div>
<div class="flex items-center gap-2">
<input class="form-checkbox" id="checkInline2" type="checkbox"/>
<label for="checkInline2">Inline 2</label>
</div>
</div>
<!-- Disabled/Indeterminate -->
<div class="flex items-center gap-2">
<input class="form-checkbox" id="checkIndeterminate" type="checkbox"/>
<label for="checkIndeterminate">Disabled indeterminate checkbox</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox" disabled="" id="checkCheckedDisabled" type="checkbox"/>
<label for="checkCheckedDisabled">Disabled checked checkbox</label>
</div>
<!-- Sizes -->
<h5 class="mt-5 mb-2 font-semibold">Sizes</h5>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox size-5!" id="checkSize1" type="checkbox"/>
<label for="checkSize1">I'm 16px Checkbox</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-secondary! size-6.25!" id="checkSize2" type="checkbox"/>
<label for="checkSize2">I'm 20px Checkbox</label>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Switches -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Switches</label>
</div>
<div class="space-y-3 lg:col-span-2">
<!-- Enabled Switch -->
<div class="flex items-center gap-2">
<input checked="" class="form-switch" id="switch1" type="checkbox"/>
<label for="switch1">Enabled Switch</label>
</div>
<!-- Disabled Switch -->
<div class="flex items-center gap-2">
<input class="form-switch" disabled="" id="switch2" type="checkbox"/>
<label class="text-default-400" for="switch2">Disabled Switch</label>
</div>
<!-- Sizes -->
<h5 class="mt-5 mb-2 font-semibold">Sizes</h5>
<!-- 16px Switch -->
<div class="flex items-center gap-2">
<input checked="" class="form-switch" id="checkboxSize16" type="checkbox"/>
<label for="checkboxSize16">I'm 16px Switch</label>
</div>
<!-- 20px Switch -->
<div class="flex items-center gap-2">
<input checked="" class="form-switch form-switch-lg checked:bg-secondary!" id="checkboxSize20" type="checkbox"/>
<label for="checkboxSize20">I'm 20px Switch</label>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Colored Checkboxes -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Colored Checkboxes</label>
</div>
<div class="col-span-1 flex flex-wrap gap-9 lg:col-span-2">
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-primary!" id="checkPrimary" type="checkbox"/>
<label for="checkPrimary">Primary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-secondary!" id="checkSecondary" type="checkbox"/>
<label for="checkSecondary">Secondary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-success!" id="checkSuccess" type="checkbox"/>
<label for="checkSuccess">Success</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-info!" id="checkInfo" type="checkbox"/>
<label for="checkInfo">Info</label>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-warning!" id="checkWarning" type="checkbox"/>
<label for="checkWarning">Warning</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-danger!" id="checkDanger" type="checkbox"/>
<label for="checkDanger">Danger</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-checkbox checked:bg-dark!" id="checkDark" type="checkbox"/>
<label for="checkDark">Dark</label>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Colored Checkboxes -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Colored Switches</label>
</div>
<div class="col-span-1 flex flex-wrap gap-9 lg:col-span-2">
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-primary!" id="checkPrimary" type="checkbox"/>
<label for="checkPrimary">Primary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-secondary!" id="checkSecondary" type="checkbox"/>
<label for="checkSecondary">Secondary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-success!" id="checkSuccess" type="checkbox"/>
<label for="checkSuccess">Success</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-info!" id="checkInfo" type="checkbox"/>
<label for="checkInfo">Info</label>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-warning!" id="checkWarning" type="checkbox"/>
<label for="checkWarning">Warning</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-danger!" id="checkDanger" type="checkbox"/>
<label for="checkDanger">Danger</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-switch checked:bg-dark!" id="checkDark" type="checkbox"/>
<label for="checkDark">Dark</label>
</div>
</div>
</div>
</div>
</div>
<div>
<!-- Default Radios -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Radios</label>
</div>
<div class="space-y-3 lg:col-span-2">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full!" id="radio1" name="gridRadio" type="radio"/>
<label for="radio1">Option 1</label>
</div>
<div class="flex items-center gap-2">
<input class="form-radio rounded-full!" id="radio2" name="gridRadio" type="radio"/>
<label for="radio2">Option 2</label>
</div>
<!-- Inline Radios -->
<div class="flex space-x-4">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full!" id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1"/>
<label for="inlineRadio1">Inline 1</label>
</div>
<div class="flex items-center gap-2">
<input class="form-radio rounded-full!" id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2"/>
<label for="inlineRadio2">Inline 2</label>
</div>
</div>
<!-- Disabled Checked -->
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full!" disabled="" id="inlineRadio3" name="disabledRadioOptions" type="radio" value="option3"/>
<label class="text-default-400" for="inlineRadio3">Disabled Checked Radio</label>
</div>
<!-- Sizes -->
<h5 class="mt-5 mb-2 font-semibold">Sizes</h5>
<!-- 16px Radios -->
<div class="flex items-center space-x-4">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! size-5!" id="radioCash" name="paymentMethod" type="radio" value="cash"/>
<label for="radioCash">Cash</label>
</div>
<div class="flex items-center gap-2">
<input class="form-radio rounded-full! size-5!" id="radioCard" name="paymentMethod" type="radio" value="card"/>
<label for="radioCard">Card</label>
</div>
</div>
<!-- 20px Radios -->
<div class="mt-2 flex items-center space-x-4">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! size-6!" id="radioPickup" name="deliveryOption" type="radio" value="pickup"/>
<label for="radioPickup">Pickup</label>
</div>
<div class="flex items-center gap-2">
<input class="form-radio rounded-full! size-6!" id="radioHome" name="deliveryOption" type="radio" value="home"/>
<label for="radioHome">Home Delivery</label>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Reverse -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Reverse</label>
</div>
<div class="col-span-1 w-full space-y-3 lg:col-span-2 lg:w-1/2">
<!-- Reverse Checkbox -->
<div class="flex flex-row-reverse items-center gap-2">
<input checked="" class="form-checkbox" id="reverseCheck1" type="checkbox"/>
<label for="reverseCheck1">Reverse checkbox</label>
</div>
<!-- Reverse Radio -->
<div class="flex flex-row-reverse items-center gap-2">
<input class="form-radio rounded-full!" disabled="" id="reverseCheck2" name="reverseRadio" type="radio"/>
<label for="reverseCheck2">Disabled reverse radio</label>
</div>
<!-- Reverse Switch -->
<div class="flex flex-row-reverse items-center gap-2">
<input checked="" class="form-switch" id="switchCheckReverse" type="checkbox"/>
<label for="switchCheckReverse">Reverse switch checkbox input</label>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Colored Radios -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Colored Radios</label>
</div>
<div class="col-span-1 flex flex-wrap gap-9 lg:col-span-2">
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-primary!" id="checkPrimary" type="checkbox"/>
<label for="checkPrimary">Primary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-secondary!" id="checkSecondary" type="checkbox"/>
<label for="checkSecondary">Secondary</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-success!" id="checkSuccess" type="checkbox"/>
<label for="checkSuccess">Success</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-info!" id="checkInfo" type="checkbox"/>
<label for="checkInfo">Info</label>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-warning!" id="checkWarning" type="checkbox"/>
<label for="checkWarning">Warning</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-danger!" id="checkDanger" type="checkbox"/>
<label for="checkDanger">Danger</label>
</div>
<div class="flex items-center gap-2">
<input checked="" class="form-radio rounded-full! checked:bg-dark!" id="checkDark" type="checkbox"/>
<label for="checkDark">Dark</label>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Toggle Checkboxes -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Checkbox Toggle</label>
</div>
<div class="space-y-3 lg:col-span-2">
<!-- Single Toggle -->
<div>
<input class="peer hidden" id="toggleSingle" type="checkbox"/>
<label class="btn border-primary text-primary peer-checked:bg-primary peer-checked:text-white" for="toggleSingle">Single Toggle</label>
</div>
<!-- Group Toggle -->
<div class="flex">
<div>
<input class="peer hidden" id="toggle1" type="checkbox"/>
<label class="btn rounded-e-none border-primary text-primary peer-checked:bg-primary peer-checked:text-white" for="toggle1">One</label>
</div>
<div>
<input class="peer hidden" id="toggle2" type="checkbox"/>
<label class="btn rounded-none border-x-0 border-primary text-primary peer-checked:bg-primary peer-checked:text-white" for="toggle2">Two</label>
</div>
<div>
<input class="peer hidden" id="toggle3" type="checkbox"/>
<label class="btn rounded-s-none border-primary text-primary peer-checked:bg-primary peer-checked:text-white" for="toggle3">Three</label>
</div>
</div>
</div>
</div>
<div class="border-default-300 my-5 border-t border-dashed"></div>
<!-- Toggle Radios -->
<div class="grid grid-cols-1 gap-1.5 lg:grid-cols-3 lg:gap-9">
<div>
<label class="form-label py-2 mb-0!">Radio Toggle</label>
</div>
<div class="col-span-1 flex lg:col-span-2">
<div>
<input checked="" class="peer hidden" id="radioLeft" name="radiotoggle" type="radio"/>
<label class="btn rounded-e-none border-secondary text-secondary peer-checked:bg-secondary peer-checked:text-white" for="radioLeft">Left</label>
</div>
<div>
<input class="peer hidden" id="radioMiddle" name="radiotoggle" type="radio"/>
<label class="btn rounded-none border-x-0 border-secondary text-secondary peer-checked:bg-secondary peer-checked:text-white" for="radioMiddle">Middle</label>
</div>
<div>
<input class="peer hidden" id="radioRight" name="radiotoggle" type="radio"/>
<label class="btn rounded-s-none border-secondary text-secondary peer-checked:bg-secondary peer-checked:text-white" for="radioRight">Right</label>
</div>
</div>
</div>
</div>
</div>
</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>