@if (!copilotConfig?.enabled || !copilotConfig?.apiKey) {
<div class="w-full h-full flex-1 flex flex-col justify-center items-center gap-4 bg-gray-500/20 backdrop-blur-md group">
    <div class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 group-hover:ngm-background-animate">
        {{ title }}
    </div>
    <div class="text-base font-bold text-transparent bg-clip-text bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 group-hover:ngm-background-animate">
        {{ subTitle }}
    </div>
    
    @if (copilotConfig?.enabled && !copilotConfig?.apiKey) {
    <div class="text-red-400">
        {{ 'Copilot.ProvideOpenaiApiKey' | translate: {Default: 'Please provide openai api key!'} }}
    </div>
    }
    
    <button mat-stroked-button (click)="navigateToConfig()">
        <div class="flex items-center">
            {{ 'Copilot.EnableCopilot' | translate: {Default: 'Enable Copilot'} }}
            <mat-icon fontSet="material-icons-outlined" displayDensity="cosy">arrow_forward</mat-icon>
        </div>
    </button>
</div>
}