{#- A password box with a button at its end that shows what is typed in it,
    and hides it again. The caller writes the input inside, with `grow` as
    its class and `input_id` as its id; `wrong` draws the box as a mistake.
    The button works through `_show_password.html`, which every page loads. -#}
{% import "adminsite/_icons.html" as icons %}
{% macro box(input_id, wrong=false) -%}
<div class="input w-full pe-1 {% if wrong %}input-error{% endif %}">
  {{ caller() }}
  <button type="button" class="btn btn-ghost btn-sm btn-square group text-muted" data-shows-password
          aria-label="{{ _('Show password') }}" aria-pressed="false" aria-controls="{{ input_id }}">
    {{- icons.icon("eye", 16, "group-aria-pressed:hidden") -}}
    {{- icons.icon("eye-off", 16, "hidden group-aria-pressed:block") -}}
  </button>
</div>
{%- endmacro %}