<div>
    <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">Staff sign in</h1>
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
        Thinkrax Central manages subscriptions across every product.
    </p>

    <form wire:submit="login" class="mt-8 space-y-4">
        <x-ui.input
            label="Email address"
            type="email"
            wire:model="email"
            autocomplete="username"
            autofocus
            required
            :error="$errors->first('email')"
        />

        <div>
            <div class="flex items-center justify-between">
                <label class="field-label mb-1.5">Password</label>
                <a href="{{ route('password.request') }}" wire:navigate
                   class="mb-1.5 text-xs font-medium text-brand hover:underline">Forgot?</a>
            </div>

            <input type="password" wire:model="password" autocomplete="current-password" class="field-input" required>

            @error('password') <p class="field-error">{{ $message }}</p> @enderror
        </div>

        <label class="flex items-center gap-2 text-sm text-slate-600 dark:text-slate-300">
            <input type="checkbox" wire:model="remember" class="rounded border-slate-300">
            Keep me signed in
        </label>

        <x-ui.button type="submit" variant="primary" class="w-full" loading="login">
            Sign in
        </x-ui.button>
    </form>

    <p class="mt-8 text-center text-xs text-slate-400">
        Shop owners sign in inside their own product, not here.
    </p>
</div>
