@props([
    'data' => null,
])

@push('scripts')
    <script src="{{ asset('js/timeline.js') }}"></script>
@endpush

@php $items = $data['timeline_items'] ?? []; @endphp

<section>
    <div class="auto-container rm-auto-container">
        <section class="h--timeline js-h--timeline">

            {{-- Navigation bar with date dots --}}
            <div class="h--timeline-container">
                <div class="h--timeline-dates">
                    <div class="h--timeline-line">
                        <ol>
                            @foreach ($items as $index => $item)
                                <li>
                                    <a href="#0"
                                       data-date="{{ $item['date'] }}"
                                       class="h--timeline-date {{ $loop->first ? 'h--timeline-date--selected' : '' }}">
                                        {{ $item['date'] }}
                                    </a>
                                </li>
                            @endforeach
                        </ol>
                        <span class="h--timeline-filling-line" aria-hidden="true"></span>
                    </div>
                </div>

                <nav class="h--timeline-navigation-container">
                    <ul>
                        <li>
                            <a href="#0" class="text-replace h--timeline-navigation h--timeline-navigation--prev h--timeline-navigation--inactive">Prev</a>
                        </li>
                        <li>
                            <a href="#0" class="text-replace h--timeline-navigation h--timeline-navigation--next">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>

            {{-- Event content panels --}}
            <div class="h--timeline-events">
                <ol>
                    @foreach ($items as $item)
                        <li class="h--timeline-event text-component {{ $loop->first ? 'h--timeline-event--selected' : '' }}">
                            <div class="h--timeline-event-content container">
                                <div class="bg-text-timeline tiptap-content">
                                    {!! tiptap_converter()->asHTML(translate_data($item['content'])) !!}
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ol>
            </div>

        </section>
    </div>
</section>