@if ($isDetail)
<section class="eca-smart-card__timeline-panel" aria-label="{{ __('site.repair_card_timeline') }}">
    <div class="eca-smart-card__timeline-head">
        <h4 class="eca-smart-card__timeline-title">{{ __('site.repair_card_timeline') }}</h4>
        <span class="eca-smart-card__timeline-badge">{{ $timelineProgress }}%</span>
    </div>
    <div
        class="eca-smart-card__timeline-meter"
        style="--timeline-progress: {{ $timelineProgress }}"
        role="progressbar"
        aria-valuenow="{{ $timelineProgress }}"
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label="{{ __('site.repair_card_timeline') }}"
    >
        <span class="eca-smart-card__timeline-meter-fill"></span>
    </div>
    <div @class([
        'eca-smart-card__timeline eca-smart-card__timeline--grid',
        'eca-smart-card__timeline--detail' => $isDetail,
    ])>
        @foreach ($timelineRows as $rowIndex => $rowSteps)
            @php
                $rowCount = count($rowSteps);
                $rowClass = match ($rowCount) {
                    2 => 'eca-smart-card__timeline-row--pair',
                    3 => 'eca-smart-card__timeline-row--tail',
                    default => '',
                };
            @endphp
            <ol @class(['eca-smart-card__timeline-row', $rowClass])>
                @foreach ($rowSteps as $localIndex => $step)
                    @php
                        $index = ($rowIndex * 4) + $localIndex;
                        $state = $index < $activeStepIndex
                            ? 'done'
                            : ($index === $activeStepIndex ? 'active' : 'pending');
                    @endphp
                    <li @class(['eca-smart-card__timeline-step', "eca-smart-card__timeline-step--{$state}"])>
                        <span class="eca-smart-card__timeline-dot">
                            @if ($state === 'done')
                                <x-site.svg-icon name="check" class="h-3 w-3" />
                            @else
                                <span class="eca-smart-card__timeline-dot-num">{{ $index + 1 }}</span>
                            @endif
                        </span>
                        <span class="eca-smart-card__timeline-label">{{ __('site.card_timeline_' . $step) }}</span>
                    </li>
                @endforeach
            </ol>
        @endforeach
    </div>
</section>
@endif