<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-name="web.PasswordField">
        <div class="d-flex justify-content-between">
            <t t-if="this.props.readonly">
                <span t-if="this.state.isRevealed" t-out="this.displayedValue"/>
                <input t-else="" class="o_input border-0 py-0 o_disabled opacity-100" type="password" t-att-value="'a'.repeat(16)"/>
            </t>
            <t t-else="">
                <input
                    class="o_input"
                    autocomplete="new-password"
                    t-att-id="this.props.id"
                    t-att-type="this.state.isRevealed ? 'text' : 'password'"
                    t-att-placeholder="this.props.placeholder"
                    t-ref="input"
                />
            </t>
            <button
                class="btn fa"
                t-att-class="this.state.isRevealed ? 'fa-eye-slash' : 'fa-eye'"
                t-att-title="this.buttonTitle"
                t-on-click.stop="this.onToggleReveal"
            />
        </div>
    </t>

</templates>
