@inherits DComponentBase

@* One event of a DTimeline: Start and End on either side of the line, Middle (an icon) on it. Each part renders only
   when set. The <hr> before and after are the line segments to the neighbouring items; colour them with
   LineBeforeClass / LineAfterClass (bg-primary). *@
<li @attributes="AdditionalAttributes" class="@Class">
	<hr class="@LineBeforeClass" />
	@if (Start is not null)
	{
		<div class="@Cx("timeline-start", StartBox ? "timeline-box" : null, StartClass)">@Start</div>
	}
	@if (Middle is not null)
	{
		<div class="@Cx("timeline-middle", MiddleClass)">@Middle</div>
	}
	@if (End is not null)
	{
		<div class="@Cx("timeline-end", EndBox ? "timeline-box" : null, EndClass)">@End</div>
	}
	<hr class="@LineAfterClass" />
</li>

@code {
	[Parameter] public RenderFragment Start { get; set; }
	[Parameter] public RenderFragment Middle { get; set; }
	[Parameter] public RenderFragment End { get; set; }
	/// <summary>Draw Start as a box (timeline-box).</summary>
	[Parameter] public bool StartBox { get; set; }
	/// <summary>Draw End as a box (timeline-box).</summary>
	[Parameter] public bool EndBox { get; set; }
	[Parameter] public string StartClass { get; set; }
	[Parameter] public string MiddleClass { get; set; }
	[Parameter] public string EndClass { get; set; }
	[Parameter] public string LineBeforeClass { get; set; }
	[Parameter] public string LineAfterClass { get; set; }
}