@namespace Connected.Components
@inherits BindableItemsControlBase<CarouselItem, TData>
@using Connected.Extensions
@implements IAsyncDisposable
@typeparam TData

<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style">
    <CascadingValue Value="this">

        <SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe">
            @*Selected Content*@
            @if (ItemsSource == null)
            {
                @ChildContent
            }
            else
            {
                foreach (TData item in ItemsSource)
                {
                    <CarouselItem>
                        @ItemTemplate(item)
                    </CarouselItem>
                }
            }
        </SwipeArea>

        @*Controls*@
        <div class="d-flex flex-grow-1 align-self-auto">
            @*Left Arrow*@
            @if (ShowArrows)
            {
                @if (PreviousButtonTemplate == null)
                {
                    <IconButton tabindex="1" aria-label="Go to previous" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@PreviousIcon" OnClick="Previous" Color="ThemeColor.Inherit" />
                }
                else
                {
                <div @onclick="Previous" tabindex="1" aria-label="Go to previous" class="@NavigationButtonsClassName" style="z-index:3">
                    @PreviousButtonTemplate
                </div>
                }
            }

            @*Bullets*@
            <div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescriptionString()}")" style="z-index:3">
                @if (ShowBullets)
                {
                    <div class="d-flex justify-center">
                        @for (int i = 0; i < Items.Count; i++)
                        {
                            int current = i;
                            if (BulletTemplate == null)
                            {
                                <IconButton tabindex="@(i+3)" aria-label="@(i+1)" Class="@BulletsButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@(current == SelectedIndex ? CheckedIcon : UncheckedIcon)" OnClick="(() => MoveTo(current))" Color="ThemeColor.Inherit" />
                            }
                            else
                            {
                                <div @onclick="() => MoveTo(current)" class="@BulletsButtonsClassName" style="z-index:3">
                                    @BulletTemplate(current == SelectedIndex)
                                </div>
                            }
                        }
                    </div>
                }
            </div>

            @*Right Arrow*@
            @if (ShowArrows)
            {
                @if (NextButtonTemplate == null)
                {
                    <IconButton tabindex="2" aria-label="Go to next" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Icon="@NextIcon" OnClick="Next" Color="ThemeColor.Inherit" />
                }
                else
                {
                    <div @onclick="Next" tabindex="2" aria-label="Go to next" class="@NavigationButtonsClassName" style="z-index:3">
                        @NextButtonTemplate
                    </div>
                }
            }
        </div>

    </CascadingValue>
</section>