{{--
    brafa Systems — register. Mirror of the brafa sign-in layout.
    Livewire backing: App\Http\Livewire\Auth\Register. Bindings preserved:
      wire:submit.prevent="store", wire:model="name|email|password|passwordConfirmation",
      @error blocks, route('login').
--}}
<div class="brafa-auth">
    <aside class="brafa-auth__brand">
        <div class="brafa-auth__brand-mark">
            <img src="{{ asset('assets/img/brafa-Systems-white.png') }}" alt="brafa Systems" class="brafa-auth__logo">
        </div>
        <div class="brafa-auth__brand-tagline">
            <h2>Property access, under control.</h2>
            <p>Manage locks, codes and arrivals across every property from one place.</p>
        </div>
        <div class="brafa-auth__brand-foot">© {{ date('Y') }} brafa ehf</div>
    </aside>

    <main class="brafa-auth__panel">
        <div class="brafa-auth__card">
            <div class="brafa-auth__mobile-brand">
                <img src="{{ asset('assets/img/brafa-Systems-white.png') }}" alt="brafa Systems" class="brafa-auth__logo brafa-auth__logo--dark">
            </div>

            <span class="brafa-auth__eyebrow">Get started</span>
            <h1 class="brafa-auth__title">Create account</h1>
            <p class="brafa-auth__subtitle">Set up your brafa Systems admin access.</p>

            <form wire:submit.prevent="store" class="brafa-auth__form">
                <div class="brafa-auth__field">
                    <label class="brafa-auth__label" for="brafa-reg-name">Name</label>
                    <input wire:model="name" id="brafa-reg-name" type="text" autocomplete="name"
                           placeholder="Your name"
                           class="brafa-auth__input @error('name') is-invalid @enderror">
                    @error('name') <p class="brafa-auth__error">{{ $message }}</p> @enderror
                </div>

                <div class="brafa-auth__field">
                    <label class="brafa-auth__label" for="brafa-reg-email">Email</label>
                    <input wire:model="email" id="brafa-reg-email" type="email" autocomplete="email"
                           placeholder="you@brafa.is"
                           class="brafa-auth__input @error('email') is-invalid @enderror">
                    @error('email') <p class="brafa-auth__error">{{ $message }}</p> @enderror
                </div>

                <div class="brafa-auth__field">
                    <label class="brafa-auth__label" for="brafa-reg-password">Password</label>
                    <input wire:model="password" id="brafa-reg-password" type="password" autocomplete="new-password"
                           placeholder="At least 8 characters"
                           class="brafa-auth__input @error('password') is-invalid @enderror">
                    @error('password') <p class="brafa-auth__error">{{ $message }}</p> @enderror
                </div>

                <div class="brafa-auth__field">
                    <label class="brafa-auth__label" for="brafa-reg-password-confirm">Confirm password</label>
                    <input wire:model="passwordConfirmation" id="brafa-reg-password-confirm" type="password" autocomplete="new-password"
                           placeholder="Repeat password"
                           class="brafa-auth__input @error('passwordConfirmation') is-invalid @enderror">
                    @error('passwordConfirmation') <p class="brafa-auth__error">{{ $message }}</p> @enderror
                </div>

                <label class="brafa-auth__check" for="flexCheckDefault" style="margin-top: 2px;">
                    <input type="checkbox" id="flexCheckDefault" checked>
                    I agree to the <a href="javascript:;" class="brafa-auth__link">Terms&nbsp;and&nbsp;Conditions</a>
                </label>

                <button type="submit" class="brafa-auth__submit">Sign up</button>
            </form>

            <p class="brafa-auth__foot">
                Already have an account?
                <a href="{{ route('login') }}" class="brafa-auth__link">Sign in</a>
            </p>
        </div>
    </main>
</div>