@page "/services"

@using Moonlight.App.Services.ServiceManage
@using Moonlight.App.Database.Entities.Store
@using Moonlight.App.Services
@using Moonlight.Shared.Components.Service

@inject ServiceService ServiceService
@inject IdentityService IdentityService

<LazyLoader @ref="LazyLoader" ShowAsCard="true" Load="Load">
    <div class="row mb-5">
        @foreach (var service in MyServices)
        {
            <div class="col-md-3 col-12">
                <ServiceItem Service="service" OnChange="LazyLoader.Reload" />
            </div>
        }

        @foreach (var service in SharedServices)
        {
            <div class="col-md-3 col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title align-items-start flex-column">
                            <span class="card-label fw-bold text-dark fs-3">@(service.Nickname ?? $"Service {service.Id}")</span>
                            <span class="text-gray-400 mt-1 fw-semibold fs-6">@(service.Product.Name)</span>
                        </h3>
                    </div>
                    <div class="card-body fs-6">
                        <div class="d-flex flex-stack">
                            <div class="text-gray-700 fw-semibold me-2">Shared by</div>
                            <div class="d-flex align-items-senter">
                                <span class="fw-bold">@(service.Owner.Username)</span>
                            </div>
                        </div>

                        <div class="d-flex flex-stack">
                            <div class="text-gray-700 fw-semibold me-2">Created at</div>
                            <div class="d-flex align-items-senter">
                                <span class="fw-bold">@(Formatter.FormatDate(service.CreatedAt))</span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer p-3 text-center">
                        <button class="btn btn-primary">Manage</button>
                    </div>
                </div>
            </div>
        }
    </div>
</LazyLoader>

@code
{
    private LazyLoader LazyLoader;
    
    private Service[] MyServices;
    private Service[] SharedServices;

    private async Task Load(LazyLoader _)
    {
        MyServices = await ServiceService.Get(IdentityService.CurrentUser);
        SharedServices = await ServiceService.GetShared(IdentityService.CurrentUser);
    }
}