<div>
  <div>
    <ngx-codemirror
      [options]="{
        theme: 'material',
        lineNumbers: true,
        lineWrapping: true,
        mode: mode,
        autofocus: true
      }"
      [ngModel]="defaults[mode]"
      [autoFocus]="true"
      (ngModelChange)="handleChange($event)"
    ></ngx-codemirror>
  </div>

  <div>
    <label for="language">Langage de programmation</label>
    <select
      id="language"
      name="language"
      [(ngModel)]="mode"
      (ngModelChange)="changeMode()"
    >
      <option value="text/typescript">TypeScript</option>
      <option value="markdown">Markdown</option>
    </select>
  </div>

  <div>
    <button type="button" (click)="clear()">Remettre à zéro</button>
  </div>

  <button (click)="onRunButtonClicked()" [disabled]="isLoaded">Lancer</button>
  <div *ngIf="!isLoaded">
    <p>Chargement: {{ loadingProgress }}%</p>
    <div class="loading-bar" [style.width.%]="loadingProgress"></div>
  </div>
</div>
