@php
    $statusClasses = [
        'success'    => ['badge' => 'bg-green-50 text-green-700',   'dot' => 'bg-green-500'],
        'failed'     => ['badge' => 'bg-red-50 text-red-700',       'dot' => 'bg-red-500'],
        'error'      => ['badge' => 'bg-red-50 text-red-700',       'dot' => 'bg-red-500'],
        'conflict'   => ['badge' => 'bg-amber-50 text-amber-700',   'dot' => 'bg-amber-400'],
        'duplicate'  => ['badge' => 'bg-blue-50 text-blue-700',     'dot' => 'bg-blue-400'],
        'processing' => ['badge' => 'bg-purple-50 text-purple-700', 'dot' => 'bg-purple-400'],
    ];

    $typeBadges = [
        'event'        => ['#', t('agent.type.event'),   '#4F46E5', '#EEF2FF'],
        'event_update' => ['✎', t('agent.type.event'),   '#4F46E5', '#EEF2FF'],
        'note'         => ['#', t('agent.type.note'),    '#B45309', '#FFFBEB'],
        'note_update'  => ['✎', t('agent.type.note'),    '#B45309', '#FFFBEB'],
        'task'         => ['#', t('agent.type.task'),    '#065F46', '#ECFDF5'],
        'task_update'  => ['✎', t('agent.type.task'),    '#065F46', '#ECFDF5'],
        'contact'      => ['#', t('agent.type.contact'), '#1E40AF', '#EFF6FF'],
        'email'        => ['#', t('agent.type.email'),   '#6B21A8', '#FAF5FF'],
        'chat'         => ['#', 'Chat',                  '#374151', '#F3F4F6'],
        'multi'        => ['#', t('agent.type.multi'),   '#9D174D', '#FDF2F8'],
        'bonus'        => ['#', t('agent.type.bonus'),   '#065F46', '#ECFDF5'],
        'system'       => ['#', t('agent.type.system'),  '#374151', '#F9FAFB'],
    ];

    $statusLabels = [
        'success'    => t('agent.status.success'),
        'failed'     => t('agent.status.failed'),
        'error'      => t('agent.status.error'),
        'conflict'   => t('agent.status.conflict'),
        'duplicate'  => t('agent.status.duplicate'),
        'processing' => t('agent.status.processing'),
    ];
@endphp

<div class="space-y-6">

    {{-- Back Link --}}
    <a href="{{ route('admin.users.index') }}" wire:navigate class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors">
        <x-heroicon-o-arrow-left class="w-4 h-4"/>
        {{ t('admin.detail.back') }}
    </a>

    {{-- User Header --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-xl font-bold shrink-0">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div>
                    <h1 class="text-xl font-semibold text-gray-800">{{ $user->name }}</h1>
                    <p class="text-sm text-gray-500">{{ $user->email }}</p>
                    <div class="flex items-center gap-2 mt-1.5">
                        @if($user->subscription?->plan)
                            <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-indigo-50 text-indigo-700">
                                {{ $user->subscription->plan->name }}
                            </span>
                        @else
                            <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-500">{{ t('admin.detail.free') }}</span>
                        @endif

                        @php
                            $statusBadge = match($user->status) {
                                \App\Enums\UserStatus::Active    => 'bg-green-50 text-green-700',
                                \App\Enums\UserStatus::Blocked   => 'bg-red-50 text-red-700',
                                \App\Enums\UserStatus::Suspended => 'bg-amber-50 text-amber-700',
                                default                          => 'bg-gray-100 text-gray-600',
                            };
                            $statusLabel = match($user->status) {
                                \App\Enums\UserStatus::Active    => t('admin.users.active'),
                                \App\Enums\UserStatus::Blocked   => t('admin.users.blocked'),
                                \App\Enums\UserStatus::Suspended => t('admin.users.suspended'),
                                default                          => $user->status?->value ?? '-',
                            };
                        @endphp
                        <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $statusBadge }}">{{ $statusLabel }}</span>

                        <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $user->role->badgeBg() }} {{ $user->role->badgeText() }}">
                            {{ $user->role->label() }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('admin.users.calendar', $user) }}" wire:navigate
                   class="px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors">
                    <x-heroicon-o-calendar class="w-3.5 h-3.5 inline -mt-0.5 mr-1"/>
                    {{ t('admin.users.calendar') }}
                </a>

                {{-- Status ändern --}}
                <div x-data="{ open: false }" class="relative">
                    <button @click="open = !open"
                            class="px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition-colors">
                        {{ t('admin.users.change_status') }}
                    </button>
                    <div x-show="open" @click.away="open = false" x-cloak
                         class="absolute right-0 mt-1 w-36 bg-white border border-gray-100 rounded-lg shadow-lg z-10 py-1">
                        @foreach(['active' => t('admin.users.active'), 'suspended' => t('admin.users.suspended'), 'blocked' => t('admin.users.blocked')] as $val => $label)
                            @if($user->status?->value !== $val)
                                <button wire:click="updateStatus('{{ $val }}')"
                                        @click="open = false"
                                        class="w-full text-left px-3 py-1.5 text-xs text-gray-600 hover:bg-gray-50">
                                    {{ $label }}
                                </button>
                            @endif
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Stat Cards --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
        @php
            $statCards = [
                ['label' => t('admin.detail.events'), 'value' => $stats['events'], 'icon' => 'calendar', 'color' => 'indigo'],
                ['label' => t('admin.detail.notes'), 'value' => $stats['notes'], 'icon' => 'document-text', 'color' => 'blue'],
                ['label' => t('admin.detail.tasks'), 'value' => $stats['tasks'], 'icon' => 'check-circle', 'color' => 'green'],
                ['label' => t('admin.detail.contacts'), 'value' => $stats['contacts'], 'icon' => 'users', 'color' => 'purple'],
                ['label' => t('admin.detail.credits_month'), 'value' => number_format($stats['creditsUsed']), 'icon' => 'bolt', 'color' => 'amber'],
                ['label' => t('admin.detail.total_costs'), 'value' => '$' . number_format($stats['totalCost'], 2), 'icon' => 'currency-dollar', 'color' => 'red'],
            ];
        @endphp

        @foreach($statCards as $card)
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4">
                <div class="flex items-center gap-2 mb-2">
                    <div class="w-7 h-7 rounded-lg bg-{{ $card['color'] }}-50 flex items-center justify-center">
                        <x-dynamic-component :component="'heroicon-s-' . $card['icon']" class="w-3.5 h-3.5 text-{{ $card['color'] }}-600"/>
                    </div>
                </div>
                <p class="text-lg font-bold text-gray-800">{{ $card['value'] }}</p>
                <p class="text-[10px] text-gray-500">{{ $card['label'] }}</p>
            </div>
        @endforeach
    </div>

    {{-- Additional Info --}}
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4">
            <p class="text-xs text-gray-500 mb-1">{{ t('admin.detail.last_activity') }}</p>
            <p class="text-sm font-medium text-gray-800">{{ $stats['lastActive'] ? \Carbon\Carbon::parse($stats['lastActive'])->diffForHumans() : t('admin.detail.never') }}</p>
        </div>
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4">
            <p class="text-xs text-gray-500 mb-1">{{ t('admin.detail.credit_balance') }}</p>
            <p class="text-sm font-medium text-gray-800">{{ number_format($user->credit_balance) }}</p>
        </div>
    </div>

    {{-- Rolle ändern (nur Super Admin) --}}
    @can('change-roles')
        <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
            <div class="flex items-center gap-2 mb-4">
                <x-heroicon-o-shield-check class="w-4 h-4 text-yellow-500"/>
                <h2 class="text-sm font-semibold text-gray-700">{{ t('admin.detail.change_role') }}</h2>
            </div>
            <form wire:submit="updateRole" class="flex flex-col sm:flex-row items-start sm:items-end gap-3">
                <div class="flex-1 w-full sm:w-auto">
                    <label class="text-xs text-gray-500 mb-1 block">{{ t('admin.detail.current_role') }} <span class="font-medium text-gray-700">{{ $user->role->label() }}</span></label>
                    <select wire:model="newRole"
                            class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        @foreach(\App\Enums\UserRole::cases() as $role)
                            <option value="{{ $role->value }}">
                                {{ $role->label() }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="submit"
                        class="px-4 py-2 bg-gray-800 text-white text-sm font-medium rounded-lg hover:bg-gray-900 transition-colors shrink-0">
                    {{ t('admin.detail.save_role') }}
                </button>
            </form>
        </div>
    @endcan

    @if($user->isInternalUser())
        {{-- Interner Account Hinweis --}}
        <div class="bg-green-50 border border-green-200 rounded-xl px-5 py-4 flex items-center gap-3">
            <x-heroicon-o-shield-check class="w-5 h-5 text-green-600 shrink-0"/>
            <p class="text-sm text-green-800">
                {{ t('admin.detail.internal') }} ({{ $user->role->label() }})
                — {{ t('admin.detail.internal_desc') }}
            </p>
        </div>
    @else

    {{-- Credit-Transaktionen --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm">
        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <x-heroicon-o-bolt class="w-4 h-4 text-amber-500"/>
                <h2 class="text-sm font-semibold text-gray-700">{{ t('admin.detail.transactions') }}</h2>
            </div>
            <span class="text-sm font-semibold text-indigo-600">{{ number_format($user->credit_balance) }} {{ t('common.credits') }}</span>
        </div>

        @if($creditTx->isEmpty())
            <div class="py-8 flex flex-col items-center gap-2">
                <p class="text-sm text-gray-400">{{ t('admin.detail.no_transactions') }}</p>
            </div>
        @else
            <div class="divide-y divide-gray-50">
                @foreach($creditTx as $tx)
                    @php
                        $txBadge = match($tx->type) {
                            'onboarding'   => ['Willkommen',      'bg-green-50 text-green-700'],
                            'affiliate'    => ['Affiliate',       'bg-indigo-50 text-indigo-700'],
                            'admin_gift'   => ['Geschenk',        'bg-purple-50 text-purple-700'],
                            'refund'       => ['Rückerstattung',  'bg-green-50 text-green-700'],
                            'subscription' => ['Abo-Bonus',       'bg-blue-50 text-blue-700'],
                            'usage'        => ['Verbrauch',       'bg-red-50 text-red-700'],
                            default        => [$tx->type,         'bg-gray-100 text-gray-500'],
                        };
                    @endphp
                    <div class="px-5 py-3 flex items-center justify-between gap-3">
                        <div class="min-w-0">
                            <div class="flex items-center gap-2">
                                <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $txBadge[1] }}">{{ $txBadge[0] }}</span>
                                <span class="text-sm text-gray-800 truncate">{{ $tx->description }}</span>
                            </div>
                            <div class="flex items-center gap-2 mt-0.5">
                                <span class="text-[11px] text-gray-400">{{ $tx->created_at->format('d.m.Y H:i') }}</span>
                                @if($tx->creator)
                                    <span class="text-[11px] text-gray-300">· {{ t('admin.detail.by') }} {{ $tx->creator->name }}</span>
                                @endif
                            </div>
                        </div>
                        <span class="text-sm font-semibold shrink-0 {{ $tx->amount > 0 ? 'text-green-600' : 'text-red-500' }}">
                            {{ $tx->amount > 0 ? '+' : '' }}{{ number_format($tx->amount) }}
                        </span>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Aktueller Zugang --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-4">{{ t('admin.detail.current_access') }}</h2>

        @if($activeSub)
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-1">
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-medium text-gray-800">{{ $activeSub->plan?->name ?? $activeSub->plan_name }}</span>
                        <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $activeSub->status->badgeBg() }} {{ $activeSub->status->badgeText() }}">
                            {{ $activeSub->status->label() }}
                        </span>
                    </div>
                    <p class="text-xs text-gray-500">
                        @if($activeSub->ends_at)
                            {{ t('admin.detail.expires') }} {{ $activeSub->ends_at->format('d.m.Y') }}
                            <span class="text-gray-400">({{ $activeSub->ends_at->diffForHumans() }})</span>
                        @else
                            {{ t('admin.detail.unlimited') }}
                        @endif
                    </p>
                    @if($activeSub->gifted_by)
                        <p class="text-[11px] text-gray-400">
                            <x-heroicon-o-gift class="w-3 h-3 inline -mt-0.5"/>
                            {{ t('admin.detail.gifted_by') }} {{ $activeSub->gifter?->name ?? t('admin.detail.admin') }}
                            am {{ $activeSub->gifted_at?->format('d.m.Y') }}
                            @if($activeSub->gift_reason)
                                · {{ $activeSub->gift_reason }}
                            @endif
                        </p>
                    @endif
                </div>

                <button wire:click="revokeAccess"
                        wire:confirm="{{ t('admin.detail.confirm_revoke') }}"
                        class="px-3 py-1.5 text-xs font-medium text-red-700 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors shrink-0">
                    <x-heroicon-o-x-circle class="w-3.5 h-3.5 inline -mt-0.5 mr-0.5"/>
                    {{ t('admin.detail.revoke') }}
                </button>
            </div>
        @else
            <p class="text-sm text-gray-400">{{ t('admin.detail.no_access') }}</p>
        @endif
    </div>

    {{-- Zugang schenken (nur Admin+) --}}
    @can('gift-access')
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
        <div class="flex items-center gap-2 mb-4">
            <x-heroicon-o-gift class="w-4 h-4 text-purple-500"/>
            <h2 class="text-sm font-semibold text-gray-700">{{ t('admin.detail.gift_access') }}</h2>
        </div>
        <form wire:submit="giftAccess" class="space-y-3">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">{{ t('admin.users.plan') }}</label>
                    <select wire:model="giftPlanId"
                            class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="">{{ t('admin.detail.choose_plan') }}</option>
                        @foreach($plans as $plan)
                            <option value="{{ $plan->id }}">{{ $plan->name }} ({{ number_format($plan->price / 100, 2) }}€/Monat)</option>
                        @endforeach
                    </select>
                    @error('giftPlanId')
                        <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label class="text-xs text-gray-500 mb-1 block">{{ t('admin.detail.duration') }}</label>
                    <select wire:model="giftDuration"
                            class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                        <option value="1_month">{{ t('admin.detail.1month') }}</option>
                        <option value="3_months">{{ t('admin.detail.3months') }}</option>
                        <option value="6_months">{{ t('admin.detail.6months') }}</option>
                        <option value="1_year">{{ t('admin.detail.1year') }}</option>
                        <option value="forever">{{ t('admin.detail.unlimited_dur') }}</option>
                    </select>
                </div>
            </div>
            <div>
                <label class="text-xs text-gray-500 mb-1 block">{{ t('admin.detail.reason') }}</label>
                <input type="text" wire:model="giftReason" maxlength="255"
                       placeholder="{{ t('admin.detail.reason_ph') }}"
                       class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
            </div>
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition-colors">
                <x-heroicon-o-gift class="w-3.5 h-3.5 inline -mt-0.5 mr-1"/>
                {{ t('admin.detail.gift_access') }}
            </button>
        </form>
    </div>
    @endcan

    {{-- Give Credits Form (nur Admin+) --}}
    @can('give-credits')
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-5">
        <h2 class="text-sm font-semibold text-gray-700 mb-4">{{ t('admin.detail.gift_credits') }}</h2>
        <form wire:submit="giveCredits" class="flex flex-col sm:flex-row gap-3">
            <div class="flex-1">
                <input type="number" wire:model="creditAmount" min="1" max="10000"
                       placeholder="{{ t('admin.detail.credit_amount') }}"
                       class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                @error('creditAmount')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
            <div class="flex-1">
                <input type="text" wire:model="creditReason" maxlength="255"
                       placeholder="{{ t('admin.detail.credit_reason') }}"
                       class="input w-full text-sm border border-gray-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                @error('creditReason')
                    <p class="text-xs text-red-500 mt-1">{{ $message }}</p>
                @enderror
            </div>
            <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors shrink-0">
                {{ t('admin.detail.give_credits') }}
            </button>
        </form>
    </div>
    @endcan

    @endif {{-- Ende: !isInternalUser --}}

    {{-- Agent Logs --}}
    <div>
        <div class="flex items-center justify-between mb-3">
            <h2 class="text-sm font-semibold text-gray-700">{{ t('admin.detail.agent_logs') }}</h2>
            <span class="text-xs text-gray-400">{{ $logs->total() }} {{ t('admin.detail.entries') }}</span>
        </div>

        @if($logs->isEmpty())
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm py-12 flex flex-col items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                    <x-heroicon-o-cpu-chip class="w-6 h-6 text-gray-400"/>
                </div>
                <p class="text-sm font-medium text-gray-600">{{ t('admin.no_logs') }}</p>
            </div>
        @else
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm divide-y divide-gray-50">
                @foreach($logs as $log)
                    @php
                        $sc    = $statusClasses[$log->status] ?? ['badge' => 'bg-gray-100 text-gray-500', 'dot' => 'bg-gray-400'];
                        $badge = $typeBadges[$log->type]      ?? ['#', ucfirst($log->type ?? '?'), '#374151', '#F9FAFB'];

                        $dur = match(true) {
                            $log->duration_ms === null       => '—',
                            $log->duration_ms >= 1000        => round($log->duration_ms / 1000, 1) . 's',
                            default                          => $log->duration_ms . 'ms',
                        };
                    @endphp

                    <div class="px-5 py-4 hover:bg-gray-50/50 transition-colors" wire:key="log-{{ $log->id }}">
                        <div class="flex items-start gap-4">

                            {{-- Status Dot --}}
                            <div class="mt-1.5 shrink-0">
                                <span class="block w-2 h-2 rounded-full {{ $sc['dot'] }}"></span>
                            </div>

                            {{-- Content --}}
                            <div class="flex-1 min-w-0">

                                {{-- Input + Datum --}}
                                <div class="flex items-start justify-between gap-3">
                                    <p class="text-sm text-gray-800 leading-snug truncate">{{ $log->input }}</p>
                                    <span class="text-[11px] text-gray-300 whitespace-nowrap shrink-0">
                                        {{ $log->created_at?->format('d.m. H:i') }}
                                    </span>
                                </div>

                                {{-- Badges + Metriken --}}
                                <div class="flex flex-wrap items-center gap-2 mt-2">

                                    {{-- Typ --}}
                                    <span style="display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500;background:{{ $badge[3] }};color:{{ $badge[2] }};border:1px solid {{ $badge[2] }}22;">
                                        <span style="width:5px;height:5px;border-radius:50%;background:{{ $badge[2] }};display:inline-block;flex-shrink:0;"></span>
                                        {{ $badge[1] }}{{ $badge[0] === '✎' ? ' ✎' : '' }}
                                    </span>

                                    {{-- Status --}}
                                    <span class="text-[10px] font-medium {{ $sc['badge'] }} px-1.5 py-0.5 rounded-md">
                                        {{ $statusLabels[$log->status] ?? $log->status }}
                                    </span>

                                    <span class="text-gray-200">|</span>

                                    {{-- Credits --}}
                                    <span class="flex items-center gap-1 text-[11px] {{ $log->credits < 0 ? 'text-green-500' : 'text-gray-400' }}">
                                        <x-heroicon-o-bolt class="w-3 h-3 text-amber-400"/>
                                        {{ $log->credits }} Credits
                                    </span>

                                    {{-- Tokens --}}
                                    @if($log->total_tokens > 0)
                                        <span class="flex items-center gap-1 text-[11px] text-gray-400">
                                            <x-heroicon-o-document-text class="w-3 h-3 text-gray-300"/>
                                            {{ number_format($log->total_tokens) }}
                                            <span class="text-gray-300">({{ number_format($log->prompt_tokens) }}↑ {{ number_format($log->completion_tokens) }}↓)</span>
                                        </span>
                                    @endif

                                    {{-- Dauer --}}
                                    <span class="flex items-center gap-1 text-[11px] text-gray-400">
                                        <x-heroicon-o-clock class="w-3 h-3 text-gray-300"/>
                                        {{ $dur }}
                                    </span>

                                    {{-- Kosten --}}
                                    @if($log->cost_usd > 0)
                                        <span class="text-[11px] text-gray-400">${{ number_format($log->cost_usd, 4) }}</span>
                                    @endif

                                    {{-- Model --}}
                                    @if($log->model)
                                        <span class="text-[10px] text-gray-300 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded-md font-mono">
                                            {{ $log->model }}
                                        </span>
                                    @endif
                                </div>

                                {{-- Fehler-Ausgabe --}}
                                @if(in_array($log->status, ['failed', 'error']) && !empty($log->output['error']))
                                    <p class="text-[11px] text-red-400 mt-1.5 truncate">
                                        <x-heroicon-o-exclamation-triangle class="w-3 h-3 inline-block mr-0.5"/>
                                        {{ $log->output['error'] }}
                                    </p>
                                @endif
                            </div>

                            {{-- Delete / Refund --}}
                            @if($log->credits > 0)
                                <div class="shrink-0 mt-1">
                                    <button wire:click="deleteLog('{{ $log->id }}')"
                                            wire:confirm="{{ t('admin.detail.confirm_refund') }}"
                                            class="p-1.5 rounded-md text-gray-300 hover:text-red-500 hover:bg-red-50 transition-colors" title="{{ t('admin.detail.delete_refund') }}">
                                        <x-heroicon-o-trash class="w-4 h-4"/>
                                    </button>
                                </div>
                            @endif

                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Pagination --}}
            @if($logs->hasPages())
                <div class="flex items-center justify-between text-sm text-gray-500 pt-3">
                    <span class="text-xs">
                        {{ $logs->firstItem() }}–{{ $logs->lastItem() }} {{ t('admin.detail.of_entries', ['total' => $logs->total()]) }}
                    </span>
                    <div class="flex gap-1">
                        @if($logs->onFirstPage())
                            <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">‹</span>
                        @else
                            <button wire:click="previousPage"
                                    class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">‹</button>
                        @endif

                        @foreach($logs->getUrlRange(max(1, $logs->currentPage() - 2), min($logs->lastPage(), $logs->currentPage() + 2)) as $page => $url)
                            <button wire:click="gotoPage({{ $page }})"
                                    class="px-3 py-1.5 rounded-lg border text-xs transition-colors
                                        {{ $page === $logs->currentPage()
                                            ? 'bg-indigo-600 text-white border-indigo-600'
                                            : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                                {{ $page }}
                            </button>
                        @endforeach

                        @if($logs->hasMorePages())
                            <button wire:click="nextPage"
                                    class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">›</button>
                        @else
                            <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">›</span>
                        @endif
                    </div>
                </div>
            @endif
        @endif
    </div>

</div>
