{% from "nhsuk/components/button/macro.njk" import button as nhsukButton %}
{% from "nhsuk/components/input/macro.njk" import input as nhsukInput %}
{% from "nhsuk/macros/attributes.njk" import nhsukAttributes %}
{% from "nhsuk/macros/i18n.njk" import nhsukI18nAttributes %}
{% from "nhsuk/macros/slot.njk" import nhsukSlot %}

{#- Set classes for this component #}
{%- set classNames = "nhsuk-password-input__input nhsuk-js-password-input-input" %}
{%- set classNamesFormGroup = "nhsuk-password-input" %}

{%- if params.classes %}
  {%- set classNames = classNames ~ " " ~ params.classes %}
{%- endif %}

{%- if params.formGroup.classes %}
  {%- set classNamesFormGroup = params.formGroup.classes ~ " " ~ classNamesFormGroup %}
{%- endif %}

{%- set id = params.id if params.id else params.name %}

{%- set attributesHtml %}
  {{- nhsukAttributes({
    "data-module": "nhsuk-password-input"
  }) -}}

  {{- nhsukI18nAttributes({
    key: "show-password",
    message: params.showPasswordText | default(params.button.text)
  }) -}}

  {{- nhsukI18nAttributes({
    key: "hide-password",
    message: params.hidePasswordText
  }) -}}

  {{- nhsukI18nAttributes({
    key: "show-password-aria-label",
    message: params.showPasswordAriaLabel | default(params.showPasswordAriaLabelText) | default(params.button.ariaLabel)
  }) -}}

  {{- nhsukI18nAttributes({
    key: "hide-password-aria-label",
    message: params.hidePasswordAriaLabel | default(params.hidePasswordAriaLabelText)
  }) -}}

  {{- nhsukI18nAttributes({
    key: "password-shown-announcement",
    message: params.passwordShownAnnouncementText
  }) -}}

  {{- nhsukI18nAttributes({
    key: "password-hidden-announcement",
    message: params.passwordHiddenAnnouncementText
  }) -}}

  {{- nhsukAttributes(params.formGroup.attributes) -}}
{% endset %}

{%- set afterInputHtml %}
  {{- nhsukButton({
    text: params.showPasswordText | default(params.button.text) | default("Show"),
    ariaLabel: params.showPasswordAriaLabel | default(params.showPasswordAriaLabelText) | default(params.button.ariaLabel) | default("Show password"),
    id: params.button.id,
    href: params.button.href,
    name: params.button.name,
    value: params.button.value,
    type: params.button.type | default("button", true),
    icon: params.button.icon,
    small: params.button.small | default(not params.large),
    preventDoubleClick: params.button.preventDoubleClick,
    disabled: params.button.disabled | default(params.disabled),
    classes: "nhsuk-password-input__toggle nhsuk-js-password-input-toggle" ~ (" " ~ params.button.classes if params.button.classes),
    attributes: {
      "aria-controls": id,
      "hidden": {
        value: true,
        optional: true
      }
    },
    variant: params.button.variant | default("secondary")
  }) | trim -}}

  {{- nhsukSlot("afterInput", {
    slots: params.formGroup
  }) -}}
{% endset -%}

{{ nhsukInput({
  label: params.label,
  hint: params.hint,
  errorMessage: params.errorMessage,
  id: id,
  name: params.name,
  value: params.value,
  type: "password",
  prefix: params.prefix,
  suffix: params.suffix,
  code: params.code,
  width: params.width,
  large: params.large,
  spellcheck: false,
  autocomplete: params.autocomplete if params.autocomplete else "current-password",
  autocapitalize: "none",
  disabled: params.disabled,
  describedBy: params.describedBy,
  classes: classNames,
  attributes: params.attributes,
  inputWrapper: params.inputWrapper,
  formGroup: {
    classes: classNamesFormGroup,
    attributes: attributesHtml,
    beforeInput: params.formGroup.beforeInput,
    afterInput: {
      html: afterInputHtml | trim
    }
  }
}) | trim }}