@extends('layouts.app')

@section('content')

<div class="auth-form-container">
    <form method="post" action="{{ route('register') }}">
        @csrf
        <div class="field">
            <label class="label" for="first_name">Prénom</label>
            <div class="control has-icons-left">
                <input class="input {{ $errors->has('first_name') ? 'is-danger' : null }}" type="text" name="first_name" id="first_name" placeholder="Prénom" value="{{ old('first_name') }}" autofocus>
                <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                </span>
            </div>
            {!! $errors->first('first_name', '<p class="help is-danger">:message</p>') !!}
        </div>

        <div class="field">
            <label class="label" for="last_name">Nom</label>
            <div class="control has-icons-left">
                <input class="input {{ $errors->has('last_name') ? 'is-danger' : null }}" type="text" name="last_name" id="last_name" placeholder="Nom" value="{{ old('last_name') }}" autofocus>
                <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                </span>
            </div>
            {!! $errors->first('last_name', '<p class="help is-danger">:message</p>') !!}
        </div>

        <div class="field">
            <label class="label" for="email">Adresse email</label>
            <div class="control has-icons-left">
            <input class="input {{ $errors->has('email') ? 'is-danger' : null }}" type="email" name="email" id="email" placeholder="Adresse email" value="{{ old('email') }}" autofocus>
                <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                </span>
            </div>
            {!! $errors->first('email', '<p class="help is-danger">:message</p>') !!}
        </div>
        <div class="field">
            <label class="label" for="password">Mot de passe</label>
            <div class="control has-icons-left">
                <input class="input {{ $errors->has('password') ? 'is-danger' : null }}" type="password" name="password" id="password" placeholder="Mot de passe">
                <span class="icon is-small is-left">
                    <i class="fas fa-key"></i>
                </span>
            </div>
            {!! $errors->first('password', '<p class="help is-danger">:message</p>') !!}
        </div>

        <div class="field">
            <label class="label" for="password-confirm">Confirmez le mot de passe</label>
            <div class="control has-icons-left">
                <input class="input" type="password" name="password_confirmation" id="password-confirm" placeholder="Confirmez le mot de passe">
                <span class="icon is-small is-left">
                    <i class="fas fa-key"></i>
                </span>
            </div>
        </div>

        <div class="field is-grouped">
            <div class="control">
                <button type="submit" class="button is-ams">Créer mon compte</button>
            </div>
            <div class="control">
                <a href="{{ route('login') }}" class="button is-ams outlined">Se connecter</a>
            </div>
        </div>
        
    </form>
</div>

@endsection