<div class="available-quizzes-modal">
  <div class="modal-header">
    <h5 class="modal-title"
        [innerHTML]="'component.hashtag_management.quiz_management' | translate"></h5>
    <button type="button"
            class="close pointer"
            data-dismiss="modal"
            aria-label="Close"
            (click)="dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div class="d-flex flex-wrap flex-column flex-sm-row justify-content-between">
      <span *ngFor="let elem of sessions"
            class="text-light text-nowrap d-inline mr-sm-2 my-1 px-4 py-2 rounded pointer available-quiz"
            [class.bg-success]="elem.isValid()"
            [class.bg-danger]="!elem.isValid()"
            (click)="elem.isValid() ? startQuiz(elem) : editQuiz(elem)">
        {{elem.hashtag}}
      </span>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button"
            class="btn btn-secondary pointer"
            data-dismiss="modal"
            (click)="abort()">{{'global.close_window' | translate}}
    </button>
  </div>

</div>
