@if (items.length) {
	<nb-card class="mb-3">
		<nb-card-body>
			<div class="row">
				<div class="col-12 mb-3">
					<div class="row">
						<div class="col-6 text-left">
							<header>{{ title }}</header>
						</div>
						<div class="col-6 text-right">
							<ng-template [ngxPermissionsOnly]="integrationEditPermission">
								@if (isIntegrationAISettingsEdit) {
									<button
										status="basic"
										outline
										nbButton
										size="tiny"
										class="mr-2"
										(click)="toggleIntegrationAISettings()"
									>
										{{ 'BUTTONS.CANCEL' | translate }}
									</button>
									<button
										nbButton
										type="button"
										status="success"
										size="tiny"
										(click)="saveSettings()"
									>
										{{ 'BUTTONS.SAVE' | translate }}
									</button>
								} @else {
									<button
										nbButton
										type="button"
										status="success"
										size="tiny"
										(click)="toggleIntegrationAISettings()"
									>
										<nb-icon class="mr-1" icon="edit-outline"></nb-icon>
										{{ 'BUTTONS.EDIT' | translate }}
									</button>
								}
							</ng-template>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="integration-container">
						<ng-container
							[ngTemplateOutlet]="settingTemplate"
							[ngTemplateOutletContext]="{
								$implicit: items,
								isEdit: isIntegrationAISettingsEdit
							}"
						>
						</ng-container>
					</div>
				</div>
			</div>
		</nb-card-body>
	</nb-card>
}

<ng-template let-settings let-isEdit="isEdit" #settingTemplate>
	<ng-template [ngxPermissionsOnly]="integrationEditPermission">
		@for (setting of settings; track setting) {
			<div class="integration-row">
				<div class="integration-label-container">
					<div class="integration-label">
						{{ getTitleForSetting(setting) }}
						<nb-icon icon="info-outline" size="small" [nbTooltip]="getTooltipForSetting(setting)"></nb-icon>
					</div>
					<div class="date">
						{{ 'INTEGRATIONS.GAUZY_AI_PAGE.GENERATED' | translate }} {{ setting.createdAt | dateFormat }}
					</div>
				</div>
				<div class="integration-value">
					@if (isEdit) {
						<div class="form-group">
							<input
								nbInput
								[(ngModel)]="setting.newSettingsValue"
								[placeholder]="setting.settingsValue"
								required
								fullWidth
							/>
						</div>
					} @else {
						{{ setting.settingsValue }}
					}
				</div>
			</div>
		}
	</ng-template>
</ng-template>