exercise-details-modal.component.html

<div *ngIf="exercise">
  <div class="modal fade" id="detailModal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <jhi-exercise-header [exercise]="exercise" style="display: flex"></jhi-exercise-header>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <jhi-exercise-body [exercise]="exercise" (exerciseChangedEvent)="handleExerciseChangedEvent($event)"></jhi-exercise-body>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" jhiTranslate="exercise.close"></button>
        </div>
      </div>
    </div>
  </div>
  <jhi-markdown-viewer [exercise]="exercise"></jhi-markdown-viewer>
</div>