@extends('layouts.guest')

@section('title', 'Create account')

@section('content')
    <div class="mb-7">
        <p class="text-xs font-medium uppercase tracking-widest text-muted-foreground">Get started</p>
        <h2 class="mt-2 text-2xl font-semibold tracking-tight text-foreground">Create your account</h2>
        <p class="mt-2 text-sm text-muted-foreground">Set up your access to the microfinance management workspace.</p>
    </div>

    <form method="POST" action="{{ route('register.store') }}" class="space-y-5">
        @csrf

        <div>
            <label for="name" class="mf-field-label">Full name</label>
            <input id="name" name="name" type="text" value="{{ old('name') }}" autocomplete="name" autofocus required class="mf-input @error('name') is-invalid @enderror" placeholder="Your full name">
            @error('name')<p class="mf-field-error">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="email" class="mf-field-label">Email address</label>
            <input id="email" name="email" type="email" value="{{ old('email') }}" autocomplete="username" required class="mf-input @error('email') is-invalid @enderror" placeholder="name@company.com">
            @error('email')<p class="mf-field-error">{{ $message }}</p>@enderror
        </div>

        <div>
            <label for="password" class="mf-field-label">Password</label>
            <input id="password" name="password" type="password" autocomplete="new-password" required class="mf-input @error('password') is-invalid @enderror" placeholder="Minimum 8 characters">
            @error('password')<p class="mf-field-error">{{ $message }}</p>@enderror
            <p class="mt-1.5 text-xs text-muted-foreground">Use at least 8 characters with letters and numbers.</p>
        </div>

        <div>
            <label for="password_confirmation" class="mf-field-label">Confirm password</label>
            <input id="password_confirmation" name="password_confirmation" type="password" autocomplete="new-password" required class="mf-input" placeholder="Repeat your password">
        </div>

        <button type="submit" class="mf-btn mf-btn-primary h-10 w-full">Create account</button>
    </form>

    <p class="mt-6 text-center text-sm text-muted-foreground">
        Already have an account?
        <a href="{{ route('login') }}" class="font-medium text-primary hover:underline">Sign in</a>
    </p>
@endsection
