{{-- The state of «Состояние системы» (SystemState): the page renders it, and each refresh replaces it. --}}
@php
    $colors = ['ok' => 'success', 'warning' => 'warning', 'failing' => 'danger', 'running' => 'info', 'succeeded' => 'success', 'failed' => 'danger'];
@endphp
<div style="display: grid; gap: 1.5rem;" data-system-status="{{ $state['status'] }}">
    <x-filament::section :heading="__('cabinet::health.checks_heading').': '.$state['label']" :description="__('cabinet::health.checked_at', ['time' => $state['checked']])">
        <ul style="display: grid; gap: 0.75rem; list-style: none; margin: 0; padding: 0;">
            @foreach ([$state['freshness'], ...$state['checks']] as $check)
                <li style="display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline;" data-check="{{ $check['key'] }}" data-status="{{ $check['status'] }}">
                    <x-filament::badge :color="$colors[$check['status']] ?? 'gray'">{{ $check['label'] }}</x-filament::badge>
                    <span><strong>{{ $check['title'] }}</strong> — {{ $check['text'] }}</span>
                </li>
            @endforeach
        </ul>
    </x-filament::section>

    <x-filament::section :heading="__('cabinet::health.tasks.heading')">
        @if ($state['tasks'] === [])
            <p>{{ __('cabinet::health.tasks.empty') }}</p>
        @else
            <div style="overflow-x: auto;">
                <table style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr>
                            <th style="padding: 0.5rem;">{{ __('cabinet::health.tasks.task') }}</th>
                            <th style="padding: 0.5rem;">{{ __('cabinet::health.tasks.result') }}</th>
                            <th style="padding: 0.5rem;">{{ __('cabinet::health.tasks.started') }}</th>
                            <th style="padding: 0.5rem;">{{ __('cabinet::health.tasks.finished') }}</th>
                            <th style="padding: 0.5rem;">{{ __('cabinet::health.tasks.duration') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($state['tasks'] as $task)
                            <tr data-task="{{ $task['task'] }}" data-status="{{ $task['status'] }}">
                                <td style="padding: 0.5rem;">{{ $task['task'] }}</td>
                                <td style="padding: 0.5rem;"><x-filament::badge :color="$colors[$task['status']] ?? 'gray'">{{ $task['label'] }}</x-filament::badge></td>
                                <td style="padding: 0.5rem;">{{ $task['started'] }}</td>
                                <td style="padding: 0.5rem;">{{ $task['finished'] }}</td>
                                <td style="padding: 0.5rem;">{{ $task['duration'] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-filament::section>
</div>