{%- macro password(id, name=none, value='', classes='', toggle=False) -%}
    <div class="i-has-action {{ classes }}">
        <input id="{{ id }}" name="{{ name }}" type="password" value="{{ value }}"{% if toggle %} autocomplete="new-password"{% endif %} {{ kwargs|html_params }}>
        {%- if toggle -%}
            <button id="{{ id }}-action-button" type="button" class="i-button icon-eye-blocked"
                    title="{% trans %}Click to show/hide the password{% endtrans %}" data-tooltip-anchor></button>
        {% endif %}
    </div>
    {%- if toggle -%}
        <script>
            $('#{{ id }}-action-button').on('click', function toggleInputType(){
                $('#{{ id }}-action-button').toggleClass('icon-eye icon-eye-blocked');
                var $input = $('#{{ id }}');
                $input.prop('type', $input.prop('type') === 'text' ? 'password' : 'text');
            });
        </script>
    {% endif %}
{%- endmacro -%}
