<x-layout title="Register">
  <x-window>
    <form method="POST" action="{{ route('register') }}">
      @csrf

      <!-- Name -->
      <div class="field-row">
        <label for="name">Name</label>
        <input
          id="name"
          type="text"
          name="name"
          value="{{ old('name') }}"
          required
          autofocus
          autocomplete="name"
        />
        <x-input-error :messages="$errors->get('name')" />
      </div>

      <!-- Email Address -->
      <div class="field-row">
        <label for="email">Email</label>
        <input
          id="email"
          type="email"
          name="email"
          value="{{ old('email') }}"
          required
          autocomplete="username"
        />
        <x-input-error :messages="$errors->get('email')" />
      </div>

      <!-- Password -->
      <div class="field-row">
        <label for="password">Password</label>

        <input
          id="password"
          type="password"
          name="password"
          required
          autocomplete="new-password"
        />

        <x-input-error :messages="$errors->get('password')" />
      </div>

      <!-- Confirm Password -->
      <div class="field-row">
        <label for="password_confirmation">Confirm Password</label>

        <input
          id="password_confirmation"
          type="password"
          name="password_confirmation"
          required
          autocomplete="new-password"
        />

        <x-input-error :messages="$errors->get('password_confirmation')" />
      </div>

      <div>
        <a href="{{ route('login') }}">Already registered?</a>

        <button type="submit">Register</button>
      </div>
    </form>
  </x-window>
</x-layout>
