@inherits SettingsPanelBase

<ExpansionPanel HeaderIcon="@Icons.Material.Filled.RateReview" HeaderText="@T("Configure Chat Templates")">
    <MudText Typo="Typo.h4" Class="mb-3">
        @T("Your Chat Templates")
    </MudText>
    
    <MudJustifiedText Typo="Typo.body1" Class="mb-3">
        @T("Customize your AI experience with chat templates. Whether you want to experiment with prompt engineering, simply use a custom system prompt in the standard chat interface, or create a specialized assistant, our templates give you full control. Similar to common AI companies' playgrounds, you can define your own system prompts and leverage assistant prompts for providers that support them.")
    </MudJustifiedText>

    <MudJustifiedText Typo="Typo.body1" Class="mb-3">
        @T("Note: This advanced feature is designed for users familiar with prompt engineering concepts. Furthermore, you have to make sure yourself that your chosen provider supports the use of assistant prompts.")
    </MudJustifiedText>
    
    <MudTable Items="@this.SettingsManager.ConfigurationData.ChatTemplates" Hover="@true" Class="border-dashed border rounded-lg">
        <ColGroup>
            <col style="width: 3em;"/>
            <col/>
            <col style="width: 16em;"/>
        </ColGroup>
        <HeaderContent>
            <MudTh>#</MudTh>
            <MudTh>@T("Chat Template Name")</MudTh>
            <MudTh>@T("Actions")</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd>@context.Num</MudTd>
            <MudTd>@context.Name</MudTd>
            <MudTd>
                <MudStack Row="true" Class="mb-2 mt-2" Wrap="Wrap.Wrap">
                    <MudTooltip Text="@T("Edit")">
                        <MudIconButton Color="Color.Info" Icon="@Icons.Material.Filled.Edit" OnClick="() => this.EditChatTemplate(context)"/>
                    </MudTooltip> 
                    <MudTooltip Text="@T("Delete")">
                        <MudIconButton Color="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="() => this.DeleteChatTemplate(context)"/>
                    </MudTooltip> 
                </MudStack>
            </MudTd>
        </RowTemplate>
    </MudTable>

    @if(this.SettingsManager.ConfigurationData.ChatTemplates.Count == 0)
    {
        <MudText Typo="Typo.h6" Class="mt-3">
            @T("No chat templates configured yet.")
        </MudText>
    }

    <MudButton Variant="Variant.Filled" Color="@Color.Primary" StartIcon="@Icons.Material.Filled.AddRoad" Class="mt-3 mb-6" OnClick="@this.AddChatTemplate">
        @T("Add Chat Template")
    </MudButton>
</ExpansionPanel>