@props([
    'model',                 // Livewire property to bind
    'id' => null,
    'placeholder' => '',
    'mono' => true,
])

{{--
    A masked field for a secret that is NOT the visitor's own password.

    Provider API keys, app secrets, signing secrets and OAuth client secrets
    were all typed into password-typed inputs. That looks right and behaves
    badly: Chrome treats any password input as credentials for THIS site, so it
    offers "save password?" after saving a provider key, and later autofills the
    operator's own email and password into a Client ID / secret pair. People
    then save that, and an integration breaks in a way nobody can explain.

    So the input stays a plain text field — no password manager takes an
    interest — and the masking is done with -webkit-text-security, which renders
    dots without claiming to be a credential. A reveal toggle turns it off,
    because a secret you cannot read back is one you cannot check for a typo.

    Fields that really are a password (sign-in, change password, the installer's
    admin step) keep the password type. Masking is not the point there; telling
    the browser the truth is, and it is what earns them the browser's own
    strength and generation UI.
--}}
{{-- Extra attributes land on the INPUT, not the wrapper, so a caller can pass
     :placeholder="..." (Alpine) or an error class exactly as it would on a
     plain <input>. class= is the one exception: it belongs to the wrapper. --}}
<div x-data="{ shown: false }" {{ $attributes->only('class') }}>
    <div class="relative">
        <input type="text"
               @if ($id) id="{{ $id }}" @endif
               wire:model="{{ $model }}"
               @if ($placeholder !== '') placeholder="{{ $placeholder }}" @endif
               {{ $attributes->except('class') }}
               x-bind:style="shown ? '' : '-webkit-text-security:disc; text-security:disc;'"
               class="rf-input {{ $mono ? 'rf-mono' : '' }}"
               style="padding-right:38px;"
               autocomplete="off"
               data-rf-noautofill
               data-lpignore="true"
               data-1p-ignore
               data-form-type="other"
               spellcheck="false"
               autocorrect="off"
               autocapitalize="off">

        <button type="button"
                x-on:click="shown = !shown"
                class="rf-icon-btn"
                style="position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:28px;"
                x-bind:title="shown ? @js(__('Hide')) : @js(__('Show'))"
                x-bind:aria-label="shown ? @js(__('Hide')) : @js(__('Show'))">
            <i x-show="!shown" data-lucide="eye" style="width:15px;height:15px;"></i>
            <i x-show="shown" data-lucide="eye-off" style="width:15px;height:15px;" x-cloak></i>
        </button>
    </div>
</div>