---
import Button from '@ui/Button.astro'
import InputGroup from '@ui/InputGroup.astro'
import FormGroup from '@ui/FormGroup.astro'
import Strength from '@ui/Strength.astro'
---

<div class="modal-header">
  <h4 class="modal-title" id="modal-change-password-title">Change password</h4>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>

<div class="modal-body">
  <form>
    <FormGroup label="Current password" for="password-current" class="mb-4">
      <InputGroup type="password" id="password-current" placeholder="Enter your current password" autocomplete="current-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
    </FormGroup>

    <FormGroup label="New password" for="password-new" class="mb-4">
      <InputGroup type="password" id="password-new" placeholder="Enter new password" autocomplete="new-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
      <Strength input="#password-new" ariaLabel="New password strength">Use 8 to 20 characters, with letters and numbers.</Strength>
    </FormGroup>

    <FormGroup label="Confirm new password" for="password-confirm" class="mb-4">
      <InputGroup type="password" id="password-confirm" placeholder="Confirm your new password" autocomplete="new-password" appendButton={[{ icon: 'eye', description: 'Show password' }]} flat />
      <div class="invalid-feedback d-none" id="password-match-error" role="alert">Passwords do not match.</div>
    </FormGroup>

    <Button type="submit" text="Update password" color="primary" block class="mt-4" />
  </form>
</div>
<!-- BEGIN CHANGE PASSWORD -->
<script is:inline>
  // Password show/hide toggles are wired generically by InputGroup.astro (data-password-toggle).
  // The strength meter is wired by tabler.js from data-bs-strength.
  function initChangePassword() {
    const newPasswordInput = document.getElementById('password-new')
    const confirmPasswordInput = document.getElementById('password-confirm')
    const matchError = document.getElementById('password-match-error')

    if (!newPasswordInput || !confirmPasswordInput || !matchError) {
      return
    }

    const validateMatch = () => {
      const newPassword = newPasswordInput.value
      const confirmPassword = confirmPasswordInput.value

      if (confirmPassword && newPassword !== confirmPassword) {
        confirmPasswordInput.classList.add('is-invalid')
        confirmPasswordInput.setAttribute('aria-invalid', 'true')
        confirmPasswordInput.setAttribute('aria-describedby', 'password-match-error')
        matchError.classList.remove('d-none')
      } else {
        confirmPasswordInput.classList.remove('is-invalid')
        confirmPasswordInput.removeAttribute('aria-invalid')
        confirmPasswordInput.removeAttribute('aria-describedby')
        matchError.classList.add('d-none')
      }
    }

    newPasswordInput.addEventListener('input', validateMatch)
    confirmPasswordInput.addEventListener('input', validateMatch)
  }

  document.readyState !== 'loading' ? initChangePassword() : document.addEventListener('DOMContentLoaded', initChangePassword, { once: true })
</script>
<!-- END CHANGE PASSWORD -->