<div class="w-full px-4 text-center text-xs lg:w-1/2">
    <h1 class="mb-8 text-2xl font-bold text-orange-500">AGILIZA WEB<box-icon color="white" name='stopwatch' size="sm"></box-icon></h1>
    <p class="mb-6 text-gray-400">Gerencie o tempo gasto em seus chamados.
        @if ($errors->any())
        @foreach ($errors->all() as $error)
    <p class="text-red-600">*{{ $error }}</p>
    @endforeach
    @endif
    </p>
    <form class="flex flex-col gap-6" novalidate="novalidate" method="POST" action="{{ route('login.post') }}">
        @csrf
        <input type="hidden" id="plan" name="plan">

        <div class="relative">
            <label for="username" class="flex cursor-pointer items-center gap-2 text-xs font-medium leading-none mb-3">
                <span>Usuário</span>
            </label>
            <input
                type="text"
                id="username"
                name="username"
                placeholder="nome.sobrenome"
                class="block peer w-full px-4 py-3 border border-gray-600 bg-gray-700 text-white placeholder-gray-400 transition-colors focus:border-orange-500 focus:outline-0 focus:ring focus:ring-orange-500"
                required>
        </div>

        <div class="relative">
            <label for="password" class="flex cursor-pointer items-center gap-2 text-xs font-medium leading-none mb-3">
                <span>Senha</span>
            </label>
            <div class="relative">
                <input
                    type="password"
                    id="password"
                    name="password"
                    class="block peer w-full px-4 py-3 border border-gray-600 bg-gray-700 text-white placeholder-gray-400 transition-colors focus:border-orange-500 focus:outline-0 focus:ring focus:ring-orange-500"
                    required>
                <button class="lqd-show-password absolute right-3 top-1/2 z-10 inline-flex -translate-y-1/2 cursor-pointer items-center justify-center rounded transition-colors hover:bg-gray-600"
                    type="button">
                    <svg stroke-width="1.5" class="w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                        <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
                    </svg>
                    <svg stroke-width="1.5" class="hidden w-5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828"></path>
                        <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87"></path>
                        <path d="M3 3l18 18"></path>
                    </svg>
                </button>
            </div>
        </div>

        <button
            id="LoginFormButton"
            class="lqd-btn group inline-flex items-center justify-center gap-1.5 font-medium rounded-full transition-all hover:-translate-y-0.5 hover:shadow-xl lqd-btn-primary bg-orange-600 text-white hover:bg-orange-500 focus-visible:bg-orange-700 focus-visible:shadow-orange-300/10 px-5 py-3"
            type="submit">
            Entrar
        </button>
    </form>
</div>