{# Layout Horizontal text both sides #}
{% if type == 'horizontal_text_both_sides' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-start">
			{% if date %}
				{{ date }}
			{% endif %}
		</div>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Horizontal text top sides #}
{% if type == 'horizontal_text_top_side' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-start timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Horizontal text bottom sides #}
{% if type == 'horizontal_text_bottom_side' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
	</li>
{% endif %}

{# Layout Horizontal text top without icons #}
{% if type == 'horizontal_text_top_without_icons' %}
	<li{{attributes}}>
		<div class="timeline-start timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
	</li>
{% endif %}

{# Layout Horizontal text bottom without icons #}
{% if type == 'horizontal_text_bottom_without_icons' %}
	<li{{attributes}}>
		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
	</li>
{% endif %}

{# Layout Vertical text on both side #}
{% if type == 'vertical_text_both_sides' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-start">
			{% if date %}
				{{ date }}
			{% endif %}
		</div>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Vertical text on right side #}
{% if type == 'vertical_text_right_sides' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Vertical text on left side #}
{% if type == 'vertical_text_left_sides' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-start timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Vertical text left without icons #}
{% if type == 'vertical_text_left_without_icons' %}
	<li{{attributes}}>
		<div class="timeline-start timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
	</li>
{% endif %}

{# Layout Vertical text right without icons #}
{% if type == 'vertical_text_right_without_icons' %}
	<li{{attributes}}>
		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
	</li>
{% endif %}

{# Layout Responsive vertical by default, horizontal on large screen #}
{% if type == 'responsive' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-start">
			{% if date %}
				{{ date }}
			{% endif %}
		</div>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end timeline-box">
			{% if title %}
				{{ title }}
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Vertical text left side with icon snapped to the start #}
{% if type == 'vertical_text_left_side_icon_snapped' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-start mb-10 md:text-end">
			{% if date %}
				<time class="font-mono italic">{{ date }}</time>
			{% endif %}
			{% if title %}
				<div class="text-lg font-black">{{ title }}</div>
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}

{# Layout Vertical text right side with icon snapped to the start #}
{% if type == 'vertical_text_right_side_icon_snapped' %}
	<li{{attributes}}>
		<hr class="bg-{{ line_color }}"/>

		<div class="timeline-middle">
			<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-{{ check_color }}">
				<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/>
			</svg>
		</div>

		<div class="timeline-end mb-10 md:text-start">
			{% if date %}
				<time class="font-mono italic">{{ date }}</time>
			{% endif %}
			{% if title %}
				<div class="text-lg font-black">{{ title }}</div>
			{% endif %}
			{% if description %}
				{{ description }}
			{% endif %}
		</div>
		<hr class="bg-{{ line_color }}"/>
	</li>
{% endif %}
