@using AIStudio.Provider
@inherits SettingsPanelProviderBase

<ExpansionPanel HeaderIcon="@Icons.Material.Filled.Layers" HeaderText="@T("Configure LLM Providers")">
    <MudText Typo="Typo.h4" Class="mb-3">
        @T("Configured LLM Providers")
    </MudText>
    <MudJustifiedText Typo="Typo.body1" Class="mb-3">
        @T("What we call a provider is the combination of an LLM provider such as OpenAI and a model like GPT-4o. You can configure as many providers as you want. This way, you can use the appropriate model for each task. As an LLM provider, you can also choose local providers. However, to use this app, you must configure at least one provider.")
    </MudJustifiedText>
    <MudTable Items="@this.SettingsManager.ConfigurationData.Providers" Hover="@true" Class="border-dashed border rounded-lg">
        <ColGroup>
            <col style="width: 3em;"/>
            <col style="width: 12em;"/>
            <col style="width: 12em;"/>
            <col/>
            <col style="width: 22em;"/>
        </ColGroup>
        <HeaderContent>
            <MudTh>#</MudTh>
            <MudTh>@T("Instance Name")</MudTh>
            <MudTh>@T("Provider")</MudTh>
            <MudTh>@T("Model")</MudTh>
            <MudTh>@T("Actions")</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd>@context.Num</MudTd>
            <MudTd>@context.InstanceName</MudTd>
            <MudTd>@context.UsedLLMProvider.ToName()</MudTd>
            <MudTd>@this.GetLLMProviderModelName(context)</MudTd>
            <MudTd>
                <MudStack Row="true" Class="mb-2 mt-2" Spacing="1" Wrap="Wrap.Wrap">
                    @if (context.IsEnterpriseConfiguration)
                    {
                        <MudTooltip Text="@T("This provider is managed by your organization.")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Business" Disabled="true"/>
                        </MudTooltip>
                    }
                    else
                    {
                        <MudTooltip Text="@T("Open Dashboard")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.OpenInBrowser" Href="@context.UsedLLMProvider.GetDashboardURL()" Target="_blank" Disabled="@(!context.UsedLLMProvider.HasDashboard())"/>
                        </MudTooltip>
                        <MudTooltip Text="@T("Edit")">
                            <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="@(() => this.EditLLMProvider(context))"/>
                        </MudTooltip>
                        @if (this.SettingsManager.ConfigurationData.App.ShowAdminSettings)
                        {
                            <MudTooltip Text="@T("Export configuration")">
                                <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Dataset" OnClick="@(() => this.ExportLLMProvider(context))"/>
                            </MudTooltip>
                        }
                        <MudTooltip Text="@T("Delete")">
                            <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="@(() => this.DeleteLLMProvider(context))"/>
                        </MudTooltip>
                    }
                </MudStack>
            </MudTd>
        </RowTemplate>
    </MudTable>

    @if(this.SettingsManager.ConfigurationData.Providers.Count == 0)
    {
        <MudText Typo="Typo.h6" Class="mt-3">
            @T("No providers configured yet.")
        </MudText>
    }
    
    <LockableButton Text="@T("Add Provider")" IsLocked="@(() => !this.SettingsManager.ConfigurationData.App.AllowUserToAddProvider)" Icon="@Icons.Material.Filled.AddRoad" OnClickAsync="@this.AddLLMProvider" Class="mt-3" />
</ExpansionPanel>