@namespace Lumeo
@inject Lumeo.Services.Localization.ILumeoLocalizer L

@{
    var isHorizontal = Context.Orientation == Carousel.CarouselOrientation.Horizontal;
    var cssClass = isHorizontal
        ? $"min-w-0 shrink-0 grow-0 basis-full ps-4 {Class}".Trim()
        : $"min-w-0 shrink-0 grow-0 basis-full pt-4 {Class}".Trim();
}

<div role="group" aria-roledescription="slide" aria-label="@SlideLabel" class="@cssClass" style="scroll-snap-align: start;" @attributes="AdditionalAttributes">
    @ChildContent
</div>

@code {
    [CascadingParameter] public Carousel.CarouselContext Context { get; set; } = default!;
    [Parameter] public RenderFragment? ChildContent { get; set; }
    [Parameter] public int? Index { get; set; }
    [Parameter] public int? Total { get; set; }
    [Parameter] public string? Class { get; set; }
    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }

    private string? SlideLabel => Index.HasValue && Total.HasValue
        ? L["Carousel.SlideXofY", Index.Value, Total.Value]
        : null;
}
