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

@@ -290,6 +290,16 @@
                           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(false)" 
                                   (click)="insertTemplateVariable('auth.token_request_body', templateVar)"