@page "/servers"

@using MoonCore.Blazor.FlyonUi.Components
@using MoonlightServers.Frontend.UI.Components.Servers
@using MoonCore.Blazor.Tailwind.Components
@using MoonCore.Models
@using MoonlightServers.Frontend.Services
@using MoonlightServers.Shared.Http.Responses.Client.Servers

@inject ServerService ServerService

<Tabs>
    <Tab Name="Your servers">
        <LazyLoader Load="LoadOwnServers">
            @if (OwnServers.Length == 0)
            {
                <IconAlert Title="No servers found" Color="text-primary" Icon="icon-search">
                    There are no servers linked to your account
                </IconAlert>
            }
            else
            {
                <div class="flex flex-col gap-y-5">
                    @* Folder design idea
        <div class="w-full bg-gray-800 px-5 py-3.5 rounded-xl">
            <div class="flex items-center">
                <div class="bg-gray-900 bg-opacity-45 py-1 px-2 rounded-lg flex items-center">
                    <i class="icon-folder-open me-3 align-middle"></i>
                    <div class="text-lg align-middle">
                        My Cool Folder
                    </div>
                </div>
            </div>
            <div class="mt-5 flex flex-col gap-y-3">
                @foreach (var server in Servers)
                {
                    <ServerCard Server="server" />
                }
            </div>
        </div>
*@
                    @foreach (var server in OwnServers)
                    {
                        <ServerCard Server="server"/>
                    }
                </div>
            }
        </LazyLoader>
    </Tab>
    <Tab Name="Shared servers">
        <LazyLoader Load="LoadSharedServers">
            @if (SharedServers.Length == 0)
            {
                <IconAlert Title="No shared servers found" Color="text-primary" Icon="icon-share-2">
                    There are no shared servers linked to your account
                </IconAlert>
            }
            else
            {
                <div class="flex flex-col gap-y-5">
                    @foreach (var server in SharedServers)
                    {
                        <ServerCard Server="server"/>
                    }
                </div>
            }
        </LazyLoader>
    </Tab>
</Tabs>

@code
{
    private ServerDetailResponse[] OwnServers;
    private ServerDetailResponse[] SharedServers;

    private async Task LoadOwnServers(LazyLoader lazyLoader)
    {
        OwnServers = await PagedData<ServerDetailResponse>.All(async (page, pageSize) =>
            await ServerService.GetServers(page, pageSize)
        );
    }
    
    private async Task LoadSharedServers(LazyLoader lazyLoader)
    {
        SharedServers = await PagedData<ServerDetailResponse>.All(async (page, pageSize) =>
            await ServerService.GetSharedServers(page, pageSize)
        );
    }
}