Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

@@ -44,29 +44,32 @@
                       class="json-textarea"
                       (click)="saveCursorPosition('body_template', $event)"
                       (keyup)="saveCursorPosition('body_template', $event)"></textarea>
-              <div class="template-helpers">
-                <mat-expansion-panel>
-                  <mat-expansion-panel-header>
-                    <mat-panel-title>
-                      <mat-icon>help_outline</mat-icon>
-                      Template Variables
-                    </mat-panel-title>
-                  </mat-expansion-panel-header>
-                  <div class="template-list">
-                    <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
-                              (click)="insertTemplateVariable('body_template', templateVar)"
-                              class="template-chip">
-                      {{ templateVar }}
-                    </mat-chip>
-                  </div>                
-                </mat-expansion-panel>
-              </div>
-              <button mat-button type="button" 
-                      (click)="validateJSON('body_template')"
-                      [color]="validateJSON('body_template') ? 'primary' : 'warn'">
-                <mat-icon>check_circle</mat-icon>
-                Validate JSON
-              </button>
+            <div class="template-helpers">
+              <mat-expansion-panel>
+                <mat-expansion-panel-header>
+                  <mat-panel-title>
+                    <mat-icon>help_outline</mat-icon>
+                    Template Variables
+                  </mat-panel-title>
+                </mat-expansion-panel-header>
+                <div class="hint-text" style="margin-bottom: 16px; padding: 16px; background-color: #e3f2fd; border-radius: 4px;">
+                  <mat-icon style="vertical-align: middle; color: #1976d2;">info</mat-icon>
+                  <strong style="color: #1976d2;">Important:</strong><br>
+                  Write all variables <strong>without quotes</strong>: <code>{{'{{'}}variables.pnr{{'}}'}}</code><br>
+                  The system will automatically add quotes for string values during execution.<br><br>
+                  <strong>Examples:</strong><br>
+                  • <code>{ "pnr": {{'{{'}}variables.pnr{{'}}'}} }</code> → <code>{ "pnr": "ABC123" }</code><br>
+                  • <code>{ "count": {{'{{'}}variables.passenger_count{{'}}'}} }</code> → <code>{ "count": 2 }</code><br>
+                  • <code>{ "active": {{'{{'}}variables.enabled{{'}}'}} }</code> → <code>{ "active": true }</code>
+                </div>
+                <div class="template-list">
+                  <mat-chip *ngFor="let templateVar of getTemplateVariables()" 
+                            (click)="insertTemplateVariable('body_template', templateVar)"
+                            class="template-chip">
+                    {{ templateVar }}
+                  </mat-chip>
+                </div>
+              </mat-expansion-panel>
             </div>
           </div>