@page "/gallery"

@namespace Wabbajack.App.Blazor.Pages

<div id="content">
    @if (_errorLoadingModlists)
    {
        @* TODO: error *@
    }
    else if (!Modlists.Any())
    {
        @* TODO: loading *@
    }
    else
    {
        @foreach (var modlist in Modlists)
        {
            <div @key="modlist.Title" class="item">
                <div class="display">
                    <img src="@modlist.Links.ImageUri" loading="lazy" class="image" alt="@modlist.Title">
                    <div class="interaction">
                        <InteractionIcon Icon="images/icons/install.svg" Label="Install" Size="75px" OnClick="@(() => OnClickDownload(modlist))"/>
                        <InteractionIcon Icon="images/icons/info.svg" Label="Information" Size="75px" OnClick="@(() => OnClickInformation(modlist))"/>
                    </div>
                </div>
                <div class="info">
                    <div class="title">@modlist.Title</div>
                    <div class="author">@modlist.Author</div>
                    <div class="description">@modlist.Description</div>
                </div>
                <div class="tags"></div>
            </div>
        }
    }
    
    @if (DownloadingMetaData is not null)
    {
        <BottomBar Image="@DownloadingMetaData.Links.ImageUri" Title="Downloading..." Subtitle="@DownloadingMetaData.Title">
            <div style="height:1.5rem;">
                <ProgressBar ProgressObserver="@DownloadProgress"/>
            </div>
        </BottomBar>
    }
</div>

@code {
    public const string Route = "/gallery";
}