<h2 mat-dialog-title>{{ menuId ? 'Editar' : 'Añadir' }} menú</h2>

<mat-dialog-content class="dialog-content">
  <div class="form-container">
    <!-- Formulario -->
    <form [formGroup]="menuForm" (ngSubmit)="save()" class="menu-form">
      <mat-form-field appearance="fill" class="form-field">
        <mat-label>Nombre del menú</mat-label>
        <input matInput formControlName="name" required>
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <span matPrefix>{{baseUrl}}/menu/</span>
        <mat-label>Url pública</mat-label>
        <input matInput formControlName="publicUrl" name="description">
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <mat-label>Resolución</mat-label>
        <input matInput formControlName="resolution" name="resolution">
      </mat-form-field>

      <mat-form-field appearance="fill" class="form-field">
        <mat-label>Comentarios</mat-label>
        <input matInput formControlName="comments" name="comments">
      </mat-form-field>

      <mat-checkbox formControlName="isDefault" name="isDefault">
        {{ 'defaultMenuLabel' | translate }}
      </mat-checkbox>
    </form>

    <!-- Iframe -->
    <div class="iframe-container" *ngIf="safeUrl">
      <iframe [src]="safeUrl" class="iframe"></iframe>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="close()">Cancelar</button>
  <button class="submit-button" (click)="save()">Guardar</button>
</mat-dialog-actions>