<div class="scroll-py-3">
    <div class="mb-3">
        <h3 class="text-lg font-semibold text-theme-text-primary">{{ $logTitle }}</h3>

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

        @if ($fileSize)
            <div class="mt-1 text-xs text-theme-muted">
                <span>{{ __('File size') }}: <span class="text-theme-text-primary">{{ $fileSize }}</span></span>
                <span class="ml-4">{{ __('Last modified') }}: <span class="text-theme-text-primary">{{ $lastModified }}</span></span>
            </div>
        @endif
    </div>

    @if ($logContent)
        <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-{{ $logFilename }}" 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-between">
            <x-jetstream.secondary-button type="button" wire:click="refreshLog" wire:loading.attr="disabled">
                <span wire:loading.remove wire:target="refreshLog">{{ __('Refresh log') }}</span>
                <span wire:loading wire:target="refreshLog">{{ __('Refreshing...') }}</span>
            </x-jetstream.secondary-button>

            <x-jetstream.button type="button" wire:click="downloadLog" wire:loading.attr="disabled">
                {{ __('Download log') }}
            </x-jetstream.button>
        </div>
    @endif

    <style>
    #log-scroll-{{ $logFilename }} {
        border-radius: 0.5rem !important;
    }
    #log-scroll-{{ $logFilename }}::-webkit-scrollbar {
        width: 8px;
    }
    #log-scroll-{{ $logFilename }}::-webkit-scrollbar-track {
        border-radius: 0 0.5rem 0.5rem 0;
        background: rgba(0, 0, 0, 0.1);
    }
    #log-scroll-{{ $logFilename }}::-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-{{ $logFilename }}');
            if (logDiv) {
                logDiv.scrollTop = logDiv.scrollHeight;
            }
        });

        // Listen for refresh event
        window.addEventListener('logRefreshed', function() {
            setTimeout(function() {
                var logDiv = document.getElementById('log-scroll-{{ $logFilename }}');
                if (logDiv) {
                    logDiv.scrollTop = logDiv.scrollHeight;
                }
            }, 100);
        });
    </script>
</div>
