@extends('layouts.site')

@section('title', 'Sign Up - Auctions Ontario')

@section('content')
  @include('partials.page-banner', ['title' => 'Sign Up'])

  <section class="et_auth_wrap">
    <div class="container">
      <div class="row">
        <div class="col-md-5 mx-auto">
          <div class="et_auth_inner">
            <ul class="nav et_auth_tabs justify-content-between border-0 mb-4 pb-3">
              <li class="nav-item">
                <a href="{{ route('login') }}" class="nav-link">LOGIN</a>
              </li>
              <li class="nav-item">
                <a href="{{ route('register') }}" class="nav-link active">SIGN UP</a>
              </li>
            </ul>

            <form method="POST" action="{{ route('register') }}">
              @csrf

              <div class="mb-3">
                <input
                  id="name"
                  type="text"
                  name="name"
                  class="et_form-control form-control"
                  placeholder="Full Name"
                  value="{{ old('name') }}"
                  autocomplete="name"
                  required
                  autofocus
                />
                <x-input-error :messages="$errors->get('name')" class="mt-2" />
              </div>

              <div class="mb-3">
                <input
                  id="email"
                  type="email"
                  name="email"
                  class="et_form-control form-control"
                  placeholder="Email"
                  value="{{ old('email') }}"
                  autocomplete="username"
                  required
                />
                <x-input-error :messages="$errors->get('email')" class="mt-2" />
              </div>

              <div class="mb-3">
                <input
                  id="phone"
                  type="text"
                  name="phone"
                  class="et_form-control form-control"
                  placeholder="Phone number"
                  value="{{ old('phone') }}"
                  autocomplete="tel"
                />
                <x-input-error :messages="$errors->get('phone')" class="mt-2" />
              </div>

              <div class="mb-3">
                <input
                  id="password"
                  type="password"
                  name="password"
                  class="et_form-control form-control"
                  placeholder="Password"
                  autocomplete="new-password"
                  required
                />
                <x-input-error :messages="$errors->get('password')" class="mt-2" />
              </div>

              <div class="mb-4">
                <input
                  id="password_confirmation"
                  type="password"
                  name="password_confirmation"
                  class="et_form-control form-control"
                  placeholder="Confirm password"
                  autocomplete="new-password"
                  required
                />
                <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />
              </div>

              <button type="submit" class="ct_orange_btn w-100 justify-content-center">
                SIGN UP
              </button>

              <p class="et_bottom_text">
                Already have an account?
                <a href="{{ route('login') }}">Login</a>
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection