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

@@ -1,8 +1,17 @@
 <h2 mat-dialog-title>
-  {{ data.mode === 'create' ? 'Create New API' : data.mode === 'duplicate' ? 'Duplicate API' : 'Edit API' }}
+  @if (data.mode === 'create') {
+    Create New API
+  } @else if (data.mode === 'duplicate') {
+    Duplicate API
+  } @else if (data.mode === 'test') {
+    Test API: {{ data.api.name }}
+  } @else {
+    Edit API: {{ data.api.name }}
+  }
 </h2>
 
 <mat-dialog-content>
+  <mat-tab-group [(selectedIndex)]="activeTabIndex">
   <form [formGroup]="form">
     <mat-tab-group>
       <!-- General Tab -->
@@ -430,10 +439,27 @@
 </mat-dialog-content>
 
 <mat-dialog-actions align="end">
-  <button mat-button (click)="cancel()">Cancel</button>
-  <button mat-raised-button color="primary" 
-          (click)="save()" 
-          [disabled]="form.invalid || saving">
-    {{ saving ? 'Saving...' : 'Save' }}
+  <button mat-button (click)="cancel()">
+    @if (data.mode === 'test') {
+      Close
+    } @else {
+      Cancel
+    }
   </button>
+  @if (data.mode !== 'test') {
+    <button mat-raised-button color="primary" 
+            (click)="save()" 
+            [disabled]="saving || form.invalid">
+      @if (saving) {
+        <mat-icon class="spin">sync</mat-icon>
+        Saving...
+      } @else {
+        @if (data.mode === 'create' || data.mode === 'duplicate') {
+          Create
+        } @else {
+          Update
+        }
+      }
+    </button>
+  }
 </mat-dialog-actions>