@using Blazorise
@inherits FsBase

@if (SelectedImageIndex.HasValue)
{
    <div class="text-center position-relative">
        <Button Color="Color.Secondary" Class="position-absolute start-0 top-0 m-2 z-3 text-white bg-dark border-0 rounded-circle w-40px h-40px fs-4 lh-1" Clicked="() => SelectedImageIndex = null">
            <i class="fa-solid fa-close"></i>
        </Button>

        <a href="@(_images[SelectedImageIndex.Value])" target="_blank" download>
            <img src="@(_images[SelectedImageIndex.Value])" class="img-fluid rounded" style="max-height: 80vh;" />
        </a>
        
        <div class="d-flex justify-content-between position-absolute top-50 start-0 w-100">
            <Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == 0)" Clicked="() => SelectedImageIndex--"><i class="fa-solid fa-chevron-left"></i></Button>
            <Button Color="Color.Dark" Class="rounded-circle" Disabled="@(SelectedImageIndex.Value == _images.Count - 1)" Clicked="() => SelectedImageIndex++"><i class="fa-solid fa-chevron-right"></i></Button>
        </div>
    </div>
}
else
{
    @if (_isLoading)
    {
        <div class="text-center my-3"><div class="spinner-border text-success"></div></div>
    }
    else if (_images.Any())
    {
        <div class="row row-cols-1 row-cols-md-3 g-2">
            @for (int i = 0; i < _images.Count; i++)
            {
                var index = i;
                <div class="col">
                    <div class="card h-100 shadow-sm" style="cursor:pointer;" @onclick="() => SelectedImageIndex = index">
                        <img src="@(_images[index])" class="card-img-top mh-100 object-fit-cover" style="height: 200px" />
                    </div>
                </div>
            }
        </div>
    }
    else
    {
        <div class="alert alert-info">Keine Bilder vorhanden.</div>
    }
    <div class="mt-3 text-end">
        <Button Color="Color.Secondary" Clicked="@(() => ModalService.Hide())">Schließen</Button>
    </div>
}