@extends('layouts.public')

@section('title', 'Register staff')

@section('content')
<div class="wrap" style="padding:64px 24px">
    <h1 style="font-size:30px;margin-bottom:24px">Register staff</h1>

    <form method="POST" action="{{ route('register') }}" style="display:flex;flex-direction:column;gap:14px">
        @csrf

        <label for="name" style="font-weight:700;font-size:14px">Name</label>
        <input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name"
               style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">
        @error('name')
            <p style="color:#B3261E;font-size:14px;margin:0">{{ $message }}</p>
        @enderror

        <label for="email" style="font-weight:700;font-size:14px">Email</label>
        <input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="username"
               style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">
        @error('email')
            <p style="color:#B3261E;font-size:14px;margin:0">{{ $message }}</p>
        @enderror

        <label for="password" style="font-weight:700;font-size:14px">Password</label>
        <input id="password" name="password" type="password" required autocomplete="new-password"
               style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">
        @error('password')
            <p style="color:#B3261E;font-size:14px;margin:0">{{ $message }}</p>
        @enderror

        <label for="password_confirmation" style="font-weight:700;font-size:14px">Confirm password</label>
        <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password"
               style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">

        <label for="invite" style="font-weight:700;font-size:14px">Invite code</label>
        <input id="invite" name="invite" type="text" required autocomplete="off"
               style="height:48px;border-radius:12px;border:1.5px solid #CBD3CC;padding:0 14px;font-size:15px">
        @error('invite')
            <p style="color:#B3261E;font-size:14px;margin:0">{{ $message }}</p>
        @enderror

        <button class="btn" type="submit">Create account</button>

        <p style="font-size:14px;text-align:center;margin:0">
            Already have an account? <a href="{{ route('login') }}" style="font-weight:700">Log in</a>
        </p>
    </form>
</div>
@endsection