<h2 mat-dialog-title>{{ isEditMode ? ('editTemplateTitle' | translate) : ('addTemplateTitle' | translate) }}</h2>

<mat-dialog-content>
  <div class="spacing-container">
    <form [formGroup]="templateForm" (ngSubmit)="onSave()">
      <mat-form-field appearance="fill">
        <mat-label>{{ 'templateNameLabel' | translate }}</mat-label>
        <input matInput formControlName="name" [placeholder]="'templateNamePlaceholder' | translate">
        <mat-error *ngIf="templateForm.get('name')?.hasError('required')">
          {{ 'templateNameError' | translate }}
        </mat-error>
      </mat-form-field>

      <mat-form-field appearance="fill">
        <mat-label>{{ 'templateContentLabel' | translate }}</mat-label>
        <textarea matInput formControlName="templateContent" rows="20"
          [placeholder]="'templateContentPlaceholder' | translate"></textarea>
        <mat-error *ngIf="templateForm.get('templateContent')?.hasError('required')">
          {{ 'templateContentError' | translate }}
        </mat-error>
      </mat-form-field>
    </form>
  </div>
</mat-dialog-content>

<mat-dialog-actions>
  <div class="actions-container">
    <button class="action-button" [matMenuTriggerFor]="templateMenu">
      {{ 'loadTemplateModelButton' | translate }}
    </button>
    <mat-menu #templateMenu="matMenu">
      <button mat-menu-item (click)="loadTemplateModel('ogLive')">{{ 'ogLiveModel' | translate }}</button>
      <button mat-menu-item (click)="loadTemplateModel('disco')">{{ 'diskModel' | translate }}</button>
    </mat-menu>

    <div class="action-buttons">
      <button class="ordinary-button" (click)="onCancel()">{{ 'cancelButton' | translate }}</button>
      <button class="submit-button" (click)="onSave()" [disabled]="!templateForm.valid">
        {{ isEditMode ? ('updateButton' | translate) : ('createButton' | translate) }}
      </button>
    </div>
  </div>
</mat-dialog-actions>