<h2 mat-dialog-title>{{ isEditMode ? ('editCalendar' | translate) : ('addCalendar' | translate) }}</h2>
<mat-dialog-content class="form-container">
  <!-- Campo para el nombre -->
  <mat-form-field appearance="fill" class="full-width">
    <mat-label>{{ 'labelName' | translate }}</mat-label>
    <input matInput [(ngModel)]="name" required>
    <mat-icon *ngIf="isEditMode" matSuffix (click)="submitForm()">mode_edit</mat-icon>
  </mat-form-field>
  
  <div style="display: flex; justify-content: space-between; align-items: center;">
    <div *ngIf="isEditMode" mat-subheader>{{ 'rulesHeader' | translate }}</div>
    <button class="action-button" *ngIf="isEditMode" (click)="createRule()" style="padding: 10px;">
      {{ 'addRule' | translate }}
    </button>
  </div>

  <mat-divider *ngIf="isEditMode"></mat-divider>

  <mat-list *ngIf="isEditMode">
    <ng-container *ngFor="let rule of remoteCalendarRules;">
      <mat-list-item>
        <div class="list-item-content">
          <mat-icon matListItemIcon>event_available</mat-icon>
          <div class="text-content">
            <div matListItemTitle>{{ rule.isRemoteAvailable ? ('statusAvailable' | translate) : ('statusUnavailable' | translate) }}</div>
            <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyFromHour }} - {{ rule.busyToHour }}</div>
            <div matListItemLine *ngIf="!rule.isRemoteAvailable">{{ rule.busyWeekDaysMap }}</div>
            <div matListItemLine *ngIf="rule.isRemoteAvailable">{{ rule.availableReason }} | {{ rule.availableFromDate | date }} - {{ rule.availableToDate | date }}</div>
          </div>
          <div class="icon-container">
            <button mat-icon-button color="primary" class="right-icon" (click)="createRule(rule)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button color="warn" class="right-icon" (click)="deleteCalendarRule(rule)">
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>
      </mat-list-item>
    </ng-container>
  </mat-list>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
  <button class="submit-button" (click)="submitForm()" [disabled]="!name || name === ''" cdkFocusInitial>
    {{ 'buttonSave' | translate }}
  </button>
</mat-dialog-actions>
