{{--@php--}}
{{--    $hasUpdate = $latest && $current && version_compare($latest, $current, '>');--}}
{{--@endphp--}}

{{--<div class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit">--}}
{{--    <div class="flex items-start gap-2">--}}
{{--        --}}{{-- Shield-Bot --}}
{{--        <div class="relative shrink-0">--}}
{{--            <div class="shrink-0 relative">--}}

{{--                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">--}}
{{--                    <defs>--}}
{{--                        <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">--}}
{{--                            <stop offset="0" stop-color="#4ade80"></stop>--}}
{{--                            <stop offset="1" stop-color="#15803d"></stop>--}}
{{--                        </linearGradient>--}}
{{--                        <radialGradient id="shine" cx="30%" cy="20%" r="70%">--}}
{{--                            <stop offset="0%" stop-color="rgba(255,255,255,0.4)"></stop>--}}
{{--                            <stop offset="100%" stop-color="rgba(255,255,255,0)"></stop>--}}
{{--                        </radialGradient>--}}
{{--                        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">--}}
{{--                            <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"></feDropShadow>--}}
{{--                        </filter>--}}
{{--                    </defs>--}}
{{--                    <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z" fill="url(#shieldGradient)" filter="url(#glow)"></path>--}}
{{--                    <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z" fill="url(#shine)"></path>--}}
{{--                    <i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $state === 'running' ? 'animate-spin' : '' }}"></i>--}}
{{--                </svg>--}}
{{--            </div>--}}
{{--        </div>--}}

{{--        <div class="min-w-0 flex-1">--}}
{{--            <div class="flex items-center justify-between gap-3">--}}
{{--                <div class="min-w-0">--}}
{{--                    <div class="text-white/90 font-semibold">MailWolt Update</div>--}}
{{--                    --}}{{-- kleine Statuszeile mit Versionen, wenn vorhanden --}}
{{--                    <div class="text-xs text-white/70">--}}
{{--                        @if($current)--}}
{{--                            aktuell: <span class="text-white/90">{{ $current }}</span>--}}
{{--                        @else--}}
{{--                            aktuell: <span class="text-white/60">–</span>--}}
{{--                        @endif--}}
{{--                        @if($latest)--}}
{{--                            <span class="mx-1 text-white/30">•</span>--}}
{{--                            verfügbar: <span class="text-emerald-200">{{ $latest }}</span>--}}
{{--                        @endif--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div>--}}
{{--                    --}}{{-- Badge rechts --}}
{{--                    <span class="shrink-0 inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] border px-3 py-1--}}
{{--          {{ $hasUpdate--}}
{{--              ? 'text-yellow-200 bg-yellow-500/10 border-yellow-400/30'--}}
{{--              : 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30' }}">--}}
{{--          <i class="ph {{ $hasUpdate ? 'ph-arrow-fat-line-up' : 'ph-check-circle' }} text-[12px]"></i>--}}
{{--          {{ $hasUpdate ? 'Update verfügbar' : 'Aktuell' }}--}}
{{--        </span>--}}
{{--                    <button wire:click="refreshState"--}}
{{--                            @disabled($state==='running')--}}
{{--                            class="inline-flex items-center gap-2 rounded p-1.5--}}
{{--                       text-white/75 bg-white/5 border border-white/10 hover:border-white/20--}}
{{--                       disabled:opacity-60">--}}
{{--                        <i class="ph ph-arrow-clockwise text-[11px]"></i>--}}
{{--                    </button>--}}

{{--                </div>--}}
{{--            </div>--}}
{{--            <div class="mt-4 flex items-center gap-2">--}}
{{--                @if($hasUpdate)--}}
{{--                    <button wire:click="runUpdate"--}}
{{--                            @disabled($state==='running')--}}
{{--                            class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5--}}
{{--                         text-emerald-200 bg-emerald-500/10 border border-emerald-400/30--}}
{{--                         hover:bg-emerald-500/15 hover:border-emerald-300/50--}}
{{--                         disabled:opacity-60">--}}
{{--                        <i class="ph ph-arrow-fat-lines-up text-[14px]"></i> Jetzt aktualisieren--}}
{{--                    </button>--}}
{{--                @endif--}}
{{--            </div>--}}

{{--            --}}{{-- Progress-Bar, wenn running --}}
{{--            @if($state === 'running')--}}
{{--                <div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden">--}}
{{--                    <div class="h-full bg-emerald-400/70 animate-[progress_1.4s_infinite]" style="width:40%"></div>--}}
{{--                </div>--}}
{{--                <style>@keyframes progress {--}}
{{--                           0% {--}}
{{--                               transform: translateX(-100%)--}}
{{--                           }--}}
{{--                           100% {--}}
{{--                               transform: translateX(260%)--}}
{{--                           }--}}
{{--                       }</style>--}}
{{--            @endif--}}
{{--        </div>--}}
{{--    </div>--}}
{{--</div>--}}
<div
    class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit"
    @if($state === 'running') wire:poll.3s="pollUpdate" @endif
>
    <div class="flex items-start gap-2">
        {{-- Shield + Update-Icon --}}
        <div class="relative shrink-0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
                <defs>
                    <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0" stop-color="#4ade80"/>
                        <stop offset="1" stop-color="#15803d"/>
                    </linearGradient>
                    <radialGradient id="shine" cx="30%" cy="20%" r="70%">
                        <stop offset="0%" stop-color="rgba(255,255,255,0.35)"/>
                        <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
                    </radialGradient>
                    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                        <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"/>
                    </filter>
                </defs>

                <!-- Schild -->
                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
                      fill="url(#shieldGradient)" filter="url(#glow)"/>
                <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
                      fill="url(#shine)"/>
                 <i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $state === 'running' ? 'animate-spin' : '' }}"></i>
            </svg>
        </div>

        <div class="min-w-0 flex-1">
            <div class="flex items-start justify-between gap-3">
                <div class="min-w-0">
                    <div class="text-white/90 font-semibold">{{ config('app.name') }} Update</div>

                    <div class="text-xs text-white/70">
                        @if($displayCurrent)
                            aktuell: <span class="text-white/90">{{ $displayCurrent }}</span>
                        @else
                            aktuell: <span class="text-white/60">–</span>
                        @endif

                        @if($displayLatest)
                            <span class="mx-1 text-white/30">•</span>
                            verfügbar: <span class="text-emerald-200">{{ $displayLatest }}</span>
                        @endif
                    </div>
                </div>

                <div class="flex flex-col items-end gap-1">
                    <span class="inline-flex items-center gap-1.5 rounded-full text-[11px] border px-3 py-1 w-fit
                        {{ $this->hasUpdate
                            ? 'text-yellow-200 bg-yellow-500/10 border-yellow-400/30'
                            : 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30' }}">
                        <i class="ph {{ $this->hasUpdate ? 'ph-arrow-fat-line-up' : 'ph-check-circle' }} text-[12px]"></i>
                        {{ $this->hasUpdate ? 'Update verfügbar' : 'Aktuell' }}
                    </span>
                    @if($this->hasUpdate)
                        <button wire:click="runUpdate"
                                @disabled($state==='running')
                                class="inline-flex items-center gap-1.5 rounded-full text-[11px] px-3 py-1 w-fit
                       text-emerald-200 bg-emerald-500/10 border border-emerald-400/30
                       hover:bg-emerald-500/15 hover:border-emerald-300/50
                       disabled:opacity-60">
                            <i class="ph ph-arrow-fat-lines-up text-[14px]"></i>
                            Jetzt aktualisieren
                        </button>
                    @endif
                </div>

            </div>

{{--            <div class="mt-4 flex items-center gap-2">--}}
{{--                @if($this->hasUpdate)--}}
{{--                    <button wire:click="runUpdate"--}}
{{--                            @disabled($state==='running')--}}
{{--                            class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5--}}
{{--                                   text-emerald-200 bg-emerald-500/10 border border-emerald-400/30--}}
{{--                                   hover:bg-emerald-500/15 hover:border-emerald-300/50--}}
{{--                                   disabled:opacity-60">--}}
{{--                        <i class="ph ph-arrow-fat-lines-up text-[14px]"></i> Jetzt aktualisieren--}}
{{--                    </button>--}}
{{--                @endif--}}
{{--            </div>--}}

            {{-- Fortschritt nur während running --}}
            @if($state === 'running')
                <div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden">
                    <div class="h-full bg-emerald-400/70 animate-[mwprogress_1.4s_infinite]" style="width:40%"></div>
                </div>
                <style>
                    @keyframes mwprogress {
                        0%   { transform: translateX(-100%) }
                        100% { transform: translateX(260%) }
                    }
                </style>
            @endif
        </div>
    </div>
</div>