<main data-testid="" class="css-1f7uoeb e1wcrodl0">
    <style>
        .form-label {
            font-size: 13px;
        }
    </style>
    <div class="container mt-5">
        <section class="bg-light mb-4 rounded">
            <div class="container-fluid h-custom">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-9 col-lg-6 col-xl-5">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
                    class="img-fluid" alt="Sample image">
                </div>
                <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1 p-2">
                  <form wire:submit.prevent="register">
                    <div class="d-flex flex-row justify-content-lg-start">
                        <h2 class="fw-bold">Create an Account...</h2>
                    </div>

                    <!-- Name input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label" for="">Fullname</label>
                        <input type="text" wire:model.lazy="name" class="form-control form-control-lg p-3"
                        placeholder="Enter name" />
                        @error('name')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    <!-- Email input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label" for="">Email</label>
                        <input type="email" wire:model.lazy="email" class="form-control form-control-lg p-3"
                        placeholder="Enter email" />
                        @error('email')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    <!-- Password input -->
                    <div data-mdb-input-init class="form-outline mb-3">
                        <label class="form-label" for="">Password</label>
                        <input type="password" wire:model.lazy="password" class="form-control form-control-lg p-3"
                        placeholder="Enter password" />
                        @error('password')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    <x-country-card />

                    <!-- Zip input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label" for="">Zip Code</label>
                        <input type="text" wire:model.lazy="zipcode" class="form-control form-control-lg p-3"
                        placeholder="Enter zip code" />
                        @error('zipcode')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    <!-- Address input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label" for="">Home Address</label>
                        <input type="text" wire:model.lazy="address" class="form-control form-control-lg p-3"
                        placeholder="Enter address" />
                        @error('address')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    <!-- phone input -->
                    <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label" for="">Phone Number</label>
                        <input type="number" wire:model.lazy="phone_number" class="form-control form-control-lg p-3"
                        placeholder="Enter phone number" />
                        @error('phone_number')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    @if($responseText)
                        <div class="text-{{ $responseCode == 1 ? 'success' : 'danger' }} fw-bold p-2"><small>{{ $responseText }}</small></div>
                    @endif

                    <div class="text-center text-lg-start mt-4 pt-2">
                        <button data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg"
                        style="padding-left: 2.5rem; padding-right: 2.5rem;">Sign Up</button>

                        <p class="small fw-bold mt-4 pt-1 mb-0">Already have an account? <a href="{{ route('login') }}"
                          class="link-danger">Login</a></p>
                    </div>
                  </form>

                </div>
              </div>
            </div>
        </section>
    </div>
</main>