@props(['entry', 'unlocked', 'mode'])
{{--
    One vault entry — outline, new-value field, test/save/forget — reusable
    across every integration section on App\Livewire\Admin\Integrations. Kept
    as its own component so a section can sit a secret and a plain setting
    side by side (R20 exception: this is the page, not a table row) without
    repeating this block per section.

    Locked and unlocked are two genuinely different renders, not one hidden
    behind CSS: while locked, nothing about the stored value — not even
    whether one exists beyond the badge above this component — reaches the
    page beyond a "gesperrt" note.
--}}
<div wire:key="secret-{{ $entry['key'] }}" class="space-y-4">
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div>
            <h3 class="text-sm font-semibold text-ink">{{ $entry['label'] }}</h3>
            {{-- The NAME OF THE SERVER VARIABLE, not the internal registry key.

                 It used to print `stripe.secret` — an identifier from
                 SecretVault::REGISTRY that means nothing on this page and is not
                 something an operator can type anywhere. The env name is: it is
                 what stands in the server file, it is what the .env tab of this
                 same page lists, and when the badge beside this says "Aus der
                 Serverdatei" it is the answer to "which line?". --}}
            <p class="mt-0.5 font-mono text-xs text-muted">{{ $entry['envKey'] }}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            {{-- Which of the two slots THIS card reads and writes right now —
                 fix round, Important: save()/render() resolve without a mode
                 argument, so they always act on OperatingMode::current()'s
                 slot, but nothing on the card said so. The badge in the
                 header above (Integrations::mode_title) is not enough: it is
                 not visible at the card an operator is about to type into,
                 and repeating "Testbetrieb"/"Livebetrieb" there would only
                 restate the MODE, not name the PLATZ a value lands in. Same
                 colours as that header badge, for one visual language. --}}
            <span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
                  {{ $mode->isTest() ? 'border-warning-border bg-warning-bg text-warning' : 'border-success-border bg-success-bg text-success' }}">
                {{ __('secrets.slot.'.$mode->value) }}
            </span>
            {{-- Aufgezählt nach den zwei Enden statt nach jedem Wert einzeln:
                 grün heißt „liegt in DIESEM Platz", gelb heißt „nirgends", und
                 alles dazwischen (aus der Serverdatei, aus dem Live-Platz) ist
                 blau — in Kraft, aber woanders her. So bekommt ein künftiger
                 vierter Wert nicht still die Farbe von „Nicht gesetzt". --}}
            <span class="inline-flex items-center gap-1.5 rounded-pill border px-2.5 py-0.5 text-xs font-medium
                  {{ $entry['source'] === 'stored' ? 'border-success-border bg-success-bg text-success'
                     : ($entry['source'] === 'none' ? 'border-warning-border bg-warning-bg text-warning'
                     : 'border-info-border bg-info-bg text-info') }}">
                <span class="size-1.5 rounded-pill bg-current" aria-hidden="true"></span>
                {{ __('secrets.source_'.$entry['source']) }}
            </span>
        </div>
    </div>

    @if (! $unlocked)
        <p class="flex items-center gap-1.5 text-sm text-muted">
            <x-ui.icon name="lock" class="size-4" />
            {{ __('secrets.locked_title') }}
        </p>
    @else
        @if ($entry['outline'])
            <dl class="rounded-lg border border-line bg-surface-2 px-4 py-3 text-sm">
                <div class="flex justify-between gap-4">
                    <dt class="text-muted">{{ __('secrets.stored_value') }}</dt>
                    <dd class="font-mono text-body">{{ $entry['outline'] }}</dd>
                </div>
                @if ($entry['updated_at'])
                    <div class="mt-1 flex justify-between gap-4">
                        <dt class="text-muted">{{ __('secrets.changed') }}</dt>
                        <dd class="text-body">{{ \Illuminate\Support\Carbon::parse($entry['updated_at'])->diffForHumans() }}</dd>
                    </div>
                @endif
            </dl>
        @endif

        <div>
            @if ($entry['multiline'])
                {{-- A multi-line PEM key: a single-line password field would
                     mangle it on paste. Not masked — a textarea cannot mask
                     its content in any browser. --}}
                <label for="entered-{{ $entry['field'] }}" class="block text-sm font-medium text-body">{{ __('secrets.new_value') }}</label>
                <textarea id="entered-{{ $entry['field'] }}" name="entered.{{ $entry['field'] }}" rows="6" autocomplete="off" spellcheck="false"
                          wire:model="entered.{{ $entry['field'] }}"
                          class="mt-1.5 block w-full rounded border border-line bg-surface px-3.5 py-2.5 font-mono text-xs text-ink placeholder:text-faint transition"
                          placeholder="-----BEGIN OPENSSH PRIVATE KEY-----"></textarea>
                <p class="mt-1.5 text-xs text-muted">{{ __('secrets.ssh_private_key_hint') }}</p>
                @error('entered.'.$entry['field'])<p class="mt-1.5 text-xs text-danger">{{ $message }}</p>@enderror

                @if ($entry['generatable'])
                    {{-- Neben dem Feld, nicht unten bei Speichern: es ist die
                         Alternative ZUM Einfügen, nicht ein weiterer Schritt
                         danach. Der erzeugte private Teil geht direkt in den
                         Tresor und erscheint nie in diesem Textfeld. --}}
                    <div class="mt-3 flex flex-wrap items-center gap-2">
                        <x-ui.button variant="secondary"
                                     x-on:click="$dispatch('openModal', { component: 'admin.confirm-generate-ssh-key' })">
                            {{ __('secrets.ssh_generate') }}
                        </x-ui.button>
                        <span class="text-xs text-muted">{{ __('secrets.ssh_generate_hint') }}</span>
                    </div>
                @endif
            @else
                <x-ui.input name="entered.{{ $entry['field'] }}" type="password" autocomplete="off"
                            :label="__('secrets.new_value')" :hint="__('secrets.new_value_hint')"
                            wire:model="entered.{{ $entry['field'] }}" />
            @endif
        </div>

        <div class="flex flex-wrap gap-2">
            {{-- Test first: a key that is saved and wrong fails later,
                 somewhere else, usually in front of a customer. --}}
            @if ($entry['testable'])
                <x-ui.button variant="secondary" wire:click="test('{{ $entry['key'] }}')"
                             wire:loading.attr="disabled" wire:target="test('{{ $entry['key'] }}')">
                    {{ __('secrets.test') }}
                </x-ui.button>
            @endif

            <x-ui.button variant="primary"
                         x-on:click="$dispatch('openModal', { component: 'admin.confirm-save-secret', arguments: { key: '{{ $entry['key'] }}' } })">
                {{ __('secrets.save') }}
            </x-ui.button>

            @if ($entry['source'] === 'stored')
                <x-ui.button variant="ghost"
                             x-on:click="$dispatch('openModal', { component: 'admin.confirm-forget-secret', arguments: { key: '{{ $entry['key'] }}' } })">
                    {{ __('secrets.forget') }}
                </x-ui.button>
            @endif
        </div>

    @endif
</div>