@extends('layouts.layout')
@section('title', 'Cambiar Contraseña')
@section('body')
<div class="min-h-screen flex items-center justify-center">
    <div class="grid grid-cols-1 md:grid-cols-10 gap-4 w-full min-h-screen max-w-[2000px] mx-auto">
        <div class="flex flex-col justify-center p-[20px] lg:px-[50px] xl:px-90px] md:col-span-4 max-w-2xl">
            <a href="/login">
                <div class="flex items-center ms-2 mb-12 hover:cursor-pointer">
                    <img src="{{ asset('storage/icons/arrow_back.svg') }}" alt="">
                    <p class="text-grey-600">Volver</p>
                </div>
            </a>
            <img src="{{ asset('storage/logo-morado.png') }}" width="144" alt="" class="mb-6">
            <div class="ps-2">
                <h1 class="text-2xl font-bold mb-2">Cambiar Contraseña</h1>
                <p class="mb-10">Ingresa tu nueva contraseña.</p>
                <new-password-form :token="{{ json_encode($token) }}" :email="{{ json_encode($email) }}"></new-password-form>
            </div>
        </div>
        <div class="hidden md:block md:col-span-6">
            <img src="{{ file_exists(public_path('storage/login-bg.png')) ? asset('storage/login-bg.png') : asset('storage/default/imageDefault.jpg') }}" loading="lazy" alt="Login Image" class="w-full h-full object-cover"/>
        </div>
    </div>
</div>
@endsection