{{-- 
	? To set: 
		*	required: 			timeline_items		as  array  	
			array option:		active				as  boolean 
								title_before		as  string html
								href				as  string 
								img_src				as  string 
								title_after			as  string html
								collapse_id			as  string 
								progress			as  int    0 - 100%


	? To implement in Blade: 
	*		@includeIf('layouts.components.cycle_timeline', [ 'timeline_items' => [] ])

			collapse need:
				show only on first item!
					<div class="timeline-collapse collapse show" id="collapse_id">
						<div class="card card-body">

						</div>
					</div>
--}}
@php
	$component_name = 'cycle_timeline';
@endphp

@if (true)

	@section('section-css')
		@parent
		@once
			<link rel="stylesheet" href="{{ asset("css/components/$component_name.css") }}">
		@endonce
	@stop

	

	<div class="timeline-wrapper clearfix">
			<div class="timeline-content-day">
					{{-- <div class="timeline-line"></div> --}}

					@php $counter = count($timeline_items); @endphp
					@foreach ($timeline_items as $item)

						<div 	class="timeline-content-item {{ !empty($item['status_border']) ? $item['status_border'] : '' }} {{ (isset($item['active']) && $item['active'] === true) ? 'active' : ($counter === count($timeline_items) && !isset($item['active']) ? 'active' : '') }}" data-timeline="time_{{ $counter }}"
							@if (isset($item['collapse_id']) && !empty($item['collapse_id']))
								{{-- onmouseover="$('#{{ $item['collapse_id'] }}').collapse('show'); $('.timeline-collapse').collapse('hide')"  --}}
							@endif 
						>
							<span class="text_before" data-href="{{ $item['href'] ?? '#' }}{{ $item['collapse_id'] ?? '' }}">
								<img src="{{ $item['img_src'] ?? 'https://picsum.photos/g/300/300'}}">
								<span class="cycle-num">{{ $item['cycle_num'] }}</span>
								<span class="cycle-title">{!! isset($item['title']) ? $item['title'] : 'Lorem Ipsum' !!}</span>
								{{-- @includeIf('layouts.components.prozess', ['status' => $item['progress'] ?? 0, 'height' => 3]) --}}
							</span>
								{{-- <div class="timeline-content-item-reveal" >
										<a 	role="button" data-href="{{ $item['href'] ?? '#' }}{{ $item['collapse_id'] ?? '' }}" >
											<img src="{{ $item['img_src'] ?? 'https://picsum.photos/g/300/300'}}">
											<span>{!! isset($item['title_after']) ? $item['title_after'] : 'Lorem Ipsum' !!}</span>
										</a>
								</div> --}}
						</div>

						@php $counter--; @endphp
					@endforeach

			</div>
	</div>

	@section('section-js')
		@parent
		@once
			<script src="{{ asset("js/components/$component_name.js") }}"></script>
		@endonce
	@stop

@endif