@extends('layouts.auth')

@section('title', 'Create New Password - ' . ($branding['company_name'] ?? 'Authentication'))

@section('content')

<x-auth-shell tagline="Create new password" size="narrow">
    <form method="POST" action="{{ route('password.update') }}" class="auth-form auth-form-main" data-turbo="false">
        @csrf
        <input type="hidden" name="token" value="{{ $token }}">

        <div class="auth-form-fields">
            <div class="auth-field">
                <label for="email" class="form-label fw-semibold text-muted">Email Address</label>
                <input id="email" type="email" class="form-control rounded-pill px-3 @error('email') is-invalid @enderror" name="email" value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus>
                @error('email')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="auth-field">
                <label for="password" class="form-label fw-semibold text-muted">New Password</label>
                <div class="input-group">
                    <input type="password" class="form-control rounded-start-pill px-3 @error('password') is-invalid @enderror" id="password" name="password" required autocomplete="new-password">
                    <span class="input-group-text bg-white rounded-end-pill border-start-0 toggle-password" data-target="password">
                        <i class="bi bi-eye text-muted"></i>
                    </span>
                </div>
                @error('password')
                    <div class="text-danger small mt-1 mb-0">{{ $message }}</div>
                @enderror
            </div>

            <div class="auth-field">
                <label for="password-confirm" class="form-label fw-semibold text-muted">Confirm Password</label>
                <div class="input-group">
                    <input type="password" class="form-control rounded-start-pill px-3" id="password-confirm" name="password_confirmation" required autocomplete="new-password">
                    <span class="input-group-text bg-white rounded-end-pill border-start-0 toggle-password" data-target="password-confirm">
                        <i class="bi bi-eye text-muted"></i>
                    </span>
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary-mj auth-submit-btn w-100 rounded-pill text-uppercase fw-semibold">
            Reset Password <i class="bi bi-check2-circle ms-1"></i>
        </button>
    </form>

    <x-slot:footer>
        <a href="{{ route('login') }}" data-turbo-frame="auth-content" class="text-danger fw-bold text-decoration-none auth-footer-text">Back to Login</a>
    </x-slot:footer>
</x-auth-shell>

@endsection
