<x-layouts.weshare>
  <div class="min-h-screen safe-bottom flex flex-col px-5 pt-16 pb-10 max-w-md mx-auto w-full">
    <div class="mb-10 text-center space-y-2">
      <p class="text-[13px] font-semibold tracking-wide uppercase text-primary">WeShare</p>
      <h1 class="text-[26px] font-bold tracking-tight text-foreground">{{ __('Choose a new password') }}</h1>
      <p class="text-[15px] text-muted-foreground">{{ __('Set a strong password for your account.') }}</p>
    </div>

    <x-error-alert class="mb-4" />

    <form method="POST" action="{{ route('password.store') }}" class="space-y-4">
      @csrf
      <input type="hidden" name="token" value="{{ $request->route('token') }}">

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="email">{{ __('Email') }}</label>
        <input
          id="email"
          type="email"
          name="email"
          value="{{ old('email', $request->email) }}"
          required
          autofocus
          autocomplete="username"
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="password">{{ __('Password') }}</label>
        <input
          id="password"
          type="password"
          name="password"
          required
          autocomplete="new-password"
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <div class="space-y-2">
        <label class="text-[13px] font-medium text-foreground" for="password_confirmation">{{ __('Confirm password') }}</label>
        <input
          id="password_confirmation"
          type="password"
          name="password_confirmation"
          required
          autocomplete="new-password"
          class="h-12 w-full rounded-xl px-4 outline-none bg-card border border-border"
        />
      </div>

      <x-primary-button variant="pill">
        {{ __('Reset password') }}
      </x-primary-button>
    </form>
  </div>
</x-layouts.weshare>
