<?php global $site_url; ?>
<div class="flex items-center justify-center px-4 h-[80vh]">
    <form id="login-form" method="post" class="login-form w-[400px] ">
        <div class="input-group mb-4">
            <label for="" class="mb-2 transition duration-300  block font-medium">Email & Username</label>
            <input required name="usernameEmail" placeholder="zontal@mvnthemes.com" type="text"
                class="hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)] px-4 w-full py-4 bg-transparent border border-[var(--zon-comment-input-b-color)] " />
        </div>
        <div class="input-group">
            <label for="" class="mb-2 transition duration-300  block font-medium">Password</label>
            <input required name="password" placeholder="#######" type="password"
                class="px-4 w-full py-4 hover:border-[var(--zon-theme-color)] focus:outline-[var(--zon-theme-color)]  bg-transparent border border-[var(--zon-comment-input-b-color)] " />
        </div>
        <button type="submit" class="w-full disabled:opacity-70 rounded-lg mt-3 py-3 text-white bg-[var(--zon-theme-color)] px-4">Login</button>
        <p style="color: var(--zon-muted-color);" class="text-center mt-3 mb-3">Don't have an acoount?</p>
        <a style="color: var(--zon-muted-color);" href="<?php echo $site_url ?>register"
            class="mt-3 py-3 border hover:border-[var(--zon-theme-color)] transition duration-300 rounded-md text-center block">Create
            an account</a>
    </form>
</div>