@props(['milestones'])

@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

<ol {{ $attributes->merge(['class' => 'space-y-0']) }}>
    @foreach ($milestones as $m)
        <li class="relative flex gap-4 pb-8 {{ $loop->last ? '' : 'border-l border-line' }} ml-3 pl-6">
            <span class="absolute -left-[7px] top-1 h-3.5 w-3.5 rounded-full border-2 {{ $m['past'] ? 'border-line bg-paper' : 'border-rep-red bg-rep-red/20' }}" aria-hidden="true"></span>
            <div class="flex-1">
                <div class="flex flex-wrap items-baseline gap-2">
                    <span class="font-sans text-lg font-bold {{ $m['past'] ? 'text-muted' : 'text-title' }}">{{ $m['date'] }}</span>
                    @if ($m['estimated'])<span class="rounded-full bg-paper px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-muted ring-1 ring-line">indicatif</span>@endif
                    @if ($m['past'])<span class="rounded-full bg-paper px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide text-muted ring-1 ring-line">passé</span>@endif
                </div>
                <div class="mt-0.5 font-semibold {{ $m['past'] ? 'text-muted' : 'text-ink' }}">{{ $m['label'] }}</div>
                <p class="mt-1 text-sm leading-relaxed text-muted">{{ $renderer->html($m['note']) }} @if ($m['ref']){{ $renderer->html($m['ref']) }}@endif</p>
            </div>
        </li>
    @endforeach
</ol>