{{-- 
	? 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 


	? To implement in Blade: 
	*		@includeIf('layouts.components.cyicle_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>
--}}

@if (true)

	<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 {{ (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">
									{!! 
										isset($item['title_before']) 	? 	'Zy. ' .$counter .') ' 	.'<br>' 
																			.$item['title_before']  .'<br>' 
																		: 	'Zyklus ' .$counter 
									!!}
									@includeIf('layouts.components.prozess', ['status' => '30', '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']) ? $counter .') ' .$item['title_after'] : 'Lorem Ipsum' !!}</span>
										</a>
								</div>
						</div>

						@php $counter--; @endphp
					@endforeach

			</div>
	</div>


	<script>
		
	</script>

	@section('section-css')
	@parent
		<style>
			.timeline-wrapper {
				display: block;
				width: 90%;
				height: 8rem;
				position: relative;
				color: #fff;
				text-align: center;
				margin: 0 auto;
				top: -1rem;
			}
			.timeline-wrapper .timeline-line {
				display: block;
				width: 93.9%;
				height: 1px;
				background: white;
				position: absolute;
				top: 50%;
				-webkit-box-shadow: 0 0 1px black;
				-moz-box-shadow: 0 0 1px black;
				box-shadow: 0 0 1px black;
				left: 3%;
				margin-left: 2.5px;
			}
			.timeline-wrapper .timeline-content-day {
				height: 100%;
			}
			.timeline-wrapper .timeline-content-item {
				background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
				width: 7%;
				display: inline-block;
				position: relative;
				height: 100%;
				margin-right: 0;
				-webkit-transition: width 0.5s;
				-moz-transition: width 0.5s;
				-o-transition: width 0.5s;
				transition: width 0.5s;
				z-index: 1;
				font-size: 0.7rem;
			}
			.timeline-wrapper .timeline-content-item.active .text_before {
				opacity: 0;
			}
			.timeline-wrapper .timeline-content-item > span {
				height: 2rem;
				display: block;
				font-weight: bold;
				position: absolute;
				top: 50%;
				margin-top: -0.25em;
				width: 100%;
				text-shadow: 0 0 2px black;
				cursor: pointer;
			}
			.timeline-wrapper .timeline-content-item > span:before {
				content: " ";
				display: block;
				width: 0.5em;
				height: 0.5em;
				background: white;
				margin: 0 auto 0.5em auto;
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border-radius: 50%;
				-webkit-box-shadow: 0 0 1px black;
				-moz-box-shadow: 0 0 1px black;
				box-shadow: 0 0 1px black;
			}
			.timeline-wrapper .timeline-content-item .timeline-content-item-reveal {
				display: none;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -50%;
				width: 100%;
			}
			.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a {
				display: block;
				width: 100%;
				height: 100%;
			}
			.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a img {
				-moz-border-radius: 50%;
				-webkit-border-radius: 50%;
				border-radius: 50%;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				max-height: 100%;
				max-width: 100%;
				border: 3px solid white;
				-webkit-box-shadow: 0 0 2px black;
				-moz-box-shadow: 0 0 2px black;
				box-shadow: 0 0 2px black;
			}
			.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a span {
				position: absolute;
				width: 250%;
				margin-left: -75%;
				bottom: -3rem;
				left: 0;
				font-family: serif;
				font-size: 1.3em;
				font-style: italic;
				text-decoration: none;
				white-space: nowrap;
				color: white;
				text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 0 1px black;
			}
			.timeline-wrapper .timeline-content-item .timeline-content-item-reveal a span:after {
				content: "\203A";
				margin-left: 0.3em;
			}
			.timeline-wrapper .timeline-content-item.active {
				width: 9%;
			}
			.timeline-wrapper .timeline-content-item.active .timeline-content-item-reveal {
				display: block;
			}	
		</style>
	@stop

@endif