@props(['label' => '', 'value' => ''])

{{--
    Read-only, copyable value (webhook URL, verify token, redirect URI).
    Self-contained: uses its own x-data with navigator.clipboard, no ancestor needed.
--}}
<div x-data="{
    copied: false,
    copy() {
        navigator.clipboard.writeText(@js($value)).then(() => {
            this.copied = true;
            setTimeout(() => { this.copied = false; }, 2000);
        }).catch(() => {
            /* fallback for non-https or old browsers */
            const el = document.createElement('textarea');
            el.value = @js($value);
            el.style.position = 'fixed';
            el.style.opacity = '0';
            document.body.appendChild(el);
            el.select();
            document.execCommand('copy');
            document.body.removeChild(el);
            this.copied = true;
            setTimeout(() => { this.copied = false; }, 2000);
        });
    }
}">
    <label class="rf-label">{{ $label }}</label>
    <div class="flex gap-2">
        <input type="text" value="{{ $value }}" class="rf-input rf-mono" readonly>
        <button type="button" @click="copy()" class="rf-btn rf-btn-secondary" style="min-width:72px;">
            <span x-show="!copied">{{ __('Copy') }}</span>
            <span x-show="copied" x-cloak style="color:var(--color-success);">&#10003; {{ __('Copied') }}</span>
        </button>
    </div>
</div>