@page "/admin/system"

@using LucideBlazor
@using ShadcnBlazor.Buttons
@using ShadcnBlazor.Cards
@using ShadcnBlazor.Inputs
@using ShadcnBlazor.Tab
@using ShadcnBlazor.Labels

@inject NavigationManager Navigation

<Tabs DefaultValue="@(Tab ?? "customization")" OnValueChanged="OnTabChanged">
    <TabsList ClassName="inline-flex w-full lg:w-fit justify-start overflow-x-auto overflow-y-hidden">
        <TabsTrigger Value="customization">
            <PaintRollerIcon />
            Customization
        </TabsTrigger>
        <TabsTrigger Value="api">
            <KeyIcon />
            API & API Keys
        </TabsTrigger>
        <TabsTrigger Value="diagnose">
            <HeartPulseIcon />
            Diagnose
        </TabsTrigger>
    </TabsList>
    <TabsContent Value="customization">
        <Card ClassName="mt-5">
            <CardContent>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
                    <div class="col-span-1 grid gap-3">
                        <Label for="instance-name">Instance Name</Label>
                        <InputField id="instance-name" />
                    </div>
                </div>
            </CardContent>
            <CardFooter ClassName="justify-end">
                <Button>
                    <SaveIcon />
                    Save changes
                </Button>
            </CardFooter>
        </Card>
    </TabsContent>
    <TabsContent Value="diagnose">
        <Diagnose />
    </TabsContent>
</Tabs>

@code
{
    [SupplyParameterFromQuery(Name = "tab")]
    [Parameter]
    public string? Tab { get; set; }

    private void OnTabChanged(string name)
    {
        Navigation.NavigateTo($"/admin/system?tab={name}");
    }
}