@props([
    'credential',
    'revealUrl',
])

<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3 p-4 rounded-xl bg-muted/60 border border-border/70"
     data-credential-row>
    <div class="min-w-0">
        <p class="text-xs text-navy-500 font-semibold uppercase tracking-wide">{{ $credential->label_ar ?? $credential->label }}</p>
        <p class="font-mono text-sm md:text-base text-navy-900 mt-1 break-all">
            {{ $credential->username ? $credential->username . ' / ' : '' }}
            <span data-credential-value class="blur-sm select-none">••••••••••••</span>
            <span data-credential-countdown class="text-xs text-amber-600 font-bold ms-2"></span>
        </p>
        @if($credential->host)
            <p class="text-xs text-navy-500 mt-1 font-mono">{{ $credential->host }}{{ $credential->port ? ':' . $credential->port : '' }}</p>
        @endif
    </div>

    <div class="flex items-center gap-2">
        <button type="button"
                class="btn btn-outline btn-sm"
                onclick="revealCredential('{{ $revealUrl }}', '{{ csrf_token() }}', this)">
            كشف لـ 10 ثوانٍ
        </button>
    </div>
</div>