{{-- Markup Sourced From: https://preline.co/examples/forms-authentication.html --}}
@layout.auth({ title: 'Reset Password' })
  @slot('head')
    <meta name="referrer" content="no-referrer" />
  @endslot

  <div class="text-center">
    <h1 class="block text-2xl font-bold text-gray-800">
      Reset password?
    </h1>
    <p class="mt-2 text-sm text-gray-600">
      <span>Remember your password?</span>
      <a href="{{ route('auth.login.show') }}" class="text-blue-600 decoration-2 hover:underline focus:outline-none focus:underline font-medium">
        Login here
      </a>
    </p>
  </div>

  @if (!isValid)
    <!-- Invalid Token Notification -->
    <div class="mt-5 relative w-full rounded-lg border border-transparent bg-red-600 p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&:has(svg)]:pl-11 text-white">
      @!svg('ph:info', { class: 'w-5 h-5 -translate-y-0.5' })
      <h5 class="mb-1 font-medium leading-none tracking-tight">
        Link is invalid or expired
      </h5>
      <div class="text-sm opacity-80">
        This password reset link is invalid or has expired.  Please try again.
      </div>
    </div>
    <!-- End Invalid Token Notification -->

    <div class="flex justify-center mt-3">
      <a href="{{ route('auth.password.index') }}" class="pe-3.5 inline-flex items-center gap-x-2 text-sm text-gray-600 decoration-2 hover:underline hover:text-blue-600 focus:outline-none focus:underline focus:text-blue-600">
        @!svg('ph:caret-left', { class: 'size-2.5' })
        Back to forgot password
      </a>
    </div>
  @else
    @form({ action: form.post('auth.password.update'), class: 'mt-5 grid gap-y-4' })
      <input type="hidden" name="value" value="{{ value }}" />

      @form.group({ label: 'New password', name: 'password' })
        @!form.input({ type: 'password', required: true })
      @end

      @button({ type: 'submit' })
        Reset password
      @end
    @end
  @endif
@end