@extends('layouts.auth')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold tracking-tight text-white">Create your workspace</h1>
        <p class="mt-2 text-sm text-slate-400">Private endpoints stay connected to your account.</p>
    </div>

    @if ($errors->any())
        <div class="mb-5 rounded-xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-200">{{ $errors->first() }}</div>
    @endif

    <form action="{{ route('register') }}" method="POST" class="space-y-5">
        @csrf
        <div>
            <label for="name" class="text-sm font-medium text-slate-200">Name</label>
            <input id="name" name="name" type="text" value="{{ old('name') }}" required autofocus autocomplete="name" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <label for="email" class="text-sm font-medium text-slate-200">Email</label>
            <input id="email" name="email" type="email" value="{{ old('email') }}" required autocomplete="email" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <label for="password" class="text-sm font-medium text-slate-200">Password</label>
            <input id="password" name="password" type="password" required autocomplete="new-password" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <label for="password_confirmation" class="text-sm font-medium text-slate-200">Confirm password</label>
            <input id="password_confirmation" name="password_confirmation" type="password" required autocomplete="new-password" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <button type="submit" class="w-full rounded-xl bg-cyan-400 px-4 py-3 font-semibold text-slate-950 transition hover:bg-cyan-300">Create account</button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-500">Already registered? <a href="{{ route('login') }}" class="text-cyan-300 hover:text-cyan-200">Log in</a></p>
@endsection