@extends('layouts.auth')

@section('content')
    <div class="login-image">
        <div class="welcome-text">
            <h2>Recuperação de Senha</h2>
        </div>
    </div>

    <div class="login-form">
        <div class="logo-wrapper text-center">
            <img src="{{ asset('img/logo-promu.png') }}" alt="Logo Procuradoria da Mulher" class="logo">
        </div>

        <div class="alert alert-info mb-4">
            Esqueceu sua senha? Sem problema. Basta nos informar seu endereço de e-mail e enviaremos um link para
            você criar uma nova senha.
        </div>

        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}">
            @csrf

            <div class="form-floating">
                <input type="email" class="form-control @error('email') is-invalid @enderror" id="email"
                    name="email" placeholder="nome@exemplo.com" value="{{ old('email') }}" required autofocus>
                <label for="email">Email</label>

                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="input-icon" fill="#b56297"
                    viewBox="0 0 256 256" @error('email') style="display:none" @enderror>
                    <path
                        d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48Zm-96,85.15L52.57,64H203.43ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58,53.15H52.57ZM157.29,128,216,74.18V181.82Z">
                    </path>
                </svg>

                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <button type="submit" class="btn btn-login text-white">
                Enviar Link de Recuperação
            </button>

            <div class="text-center mt-4">
                <a href="{{ route('login') }}" class="forgot-password">
                    Voltar para o Login
                </a>
            </div>
        </form>
    </div>

    <style>
        .alert::before {
            width: 40%;
            height: 25%;
        }
    </style>
@endsection