<div class="scroll-py-3">
    <div class="mb-3">
        <h3 class="text-lg font-semibold text-theme-text-primary">{{ __('Application Log') }}</h3>

        @if ($message)
            <div class="mt-2">
                {!! $message !!}
            </div>
        @else
            <div class="mt-2 text-xs text-theme-muted">{{ __('Recent log output') }}</div>
        @endif

        <div class="mt-1 text-xs text-theme-muted">
            <span>
                <span class="text-theme-muted">{{ __('Disk') }}:</span>
                <span class="{{ $diskUsageClass }}"> {{ $diskUsage }}</span>
            </span>
            <span class="ml-4">
                <span class="text-theme-muted">{{ __('RAM memory') }}:</span>
                <span class="{{ $availableRamClass }}"> {{ $availableRam }}</span>
            </span>
            <span class="ml-4">
                {{ __('Queue workers running') }}:
                <span class="{{ $queueWorkersCount > 0 ? 'text-green-500' : 'text-red-500' }}">
                    {{ $queueWorkersCount }}
                </span>
            </span>
            <span class="ml-4">
                {{ __('Reverb server') }}:
                <span class="{{ $reverbConnected ? 'text-green-500' : 'text-red-500' }}">
                    {{ $reverbConnected ? __('Connected') : __('Not connected') }}
                </span>
            </span>
        </div>
    </div>

    @if ($queueWorkersCount > 0)
        <div class="mb-2 text-xs text-theme-muted">
            <pre class="whitespace-pre-wrap">{{ implode("\n", $queueWorkers) }}</pre>
        </div>
    @endif

    <div class="box-border max-h-[200px] overflow-x-auto overflow-y-auto rounded-lg bg-black pb-6 pl-6 pr-6 font-mono text-xs text-gray-200"
        id="log-scroll" style="border-radius: 0.5rem;">
        <div class="m-0 w-full whitespace-pre-wrap">
            {{ $logContent }}
        </div>
    </div>

    <div class="mt-3 flex w-full justify-end">
        <x-jetstream.button type="button" wire:click="downloadLog" wire:loading.attr="disabled">
            {{ __('Download log') }}
        </x-jetstream.button>
    </div>

    <style>
    #log-scroll {
        border-radius: 0.5rem !important;
    }
    #log-scroll::-webkit-scrollbar {
        width: 8px;
    }
    #log-scroll::-webkit-scrollbar-track {
        border-radius: 0 0.5rem 0.5rem 0;
        background: rgba(0, 0, 0, 0.1);
    }
    #log-scroll::-webkit-scrollbar-thumb {
        border-radius: 0 0.5rem 0.5rem 0;
        background: rgba(255, 255, 255, 0.3);
    }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var logDiv = document.getElementById('log-scroll');
            if (logDiv) {
                logDiv.scrollTop = logDiv.scrollHeight;
            }
        });
    </script>
</div>
