<div id="quizSummaryHeader"
     class="quizSummary mt-md-3 px-md-0">

  <div class="row no-gutters">

    <div class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
      <div class="element-wrapper d-flex flex-column bg-white px-2 py-2 mb-2 h-100"
           [attr.data-intro]="'component.quiz_summary.description.header' | translate"
           [attr.aria-label]="'component.quiz_summary.description.header' | translate">
        <h5 class="text-center">{{'component.quiz_summary.quiz_name' | translate}}</h5>
        <p class="mb-0 d-flex align-self-center align-items-end h-100 text-bold text-center"
           role="listitem">
          <span>{{questionGroupItem.hashtag}}</span>
        </p>
      </div>
    </div>

    <div class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
      <div class="element-wrapper d-flex flex-column bg-white px-2 py-2 mb-2 h-100"
           [attr.data-intro]="'component.quiz_summary.description.question_group_validation' | translate"
           [attr.aria-label]="'component.quiz_summary.description.question_group_validation' | translate">
        <h5 class="text-center">{{'component.quiz_summary.validation_question_group' | translate}}</h5>
        <p class="mb-0 d-flex align-self-center align-items-end h-100 text-bold text-center"
           role="listitem">
          <span *ngIf="questionGroupItem.isValid()"
                class="text-success">
            {{'component.quiz_summary.question_group_successful' | translate}}
          </span>
          <span *ngIf="!questionGroupItem.isValid()"
                class="text-danger">
            {{'component.quiz_summary.question_group_failed' | translate}}
          </span>
        </p>
      </div>
    </div>

    <div *ngIf="isShowingMore"
         class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
      <div class="element-wrapper bg-white px-2 py-2 mb-2 h-100"
           [attr.data-intro]="'component.quiz_summary.description.session_url' | translate"
           [attr.aria-label]="'component.quiz_summary.description.session_url' | translate">
        <h5 class="text-center">{{'component.quiz_summary.quiz_url' | translate}}</h5>
        <p class="mb-0 text-wrap"
           role="listitem">
          <span>{{quizUrl}}</span>
        </p>
      </div>
    </div>

    <div *ngIf="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0 && isShowingMore"
         class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
      <div class="element-wrapper bg-white px-2 py-2 mb-2 h-100">
        <h5 class="text-center text-hyphen">{{'component.quiz_summary.isRestrictingRudeNicks' | translate}}</h5>
        <p class="mb-0 text-center"
           role="listitem">
          <span *ngIf="questionGroupItem.sessionConfig.nicks.blockIllegalNicks">
            {{'global.yes' | translate}}
          </span>
          <span *ngIf="!questionGroupItem.sessionConfig.nicks.blockIllegalNicks">
            {{'global.no' | translate}}
          </span>
        </p>
      </div>
    </div>

    <div *ngIf="isShowingMore"
         class="col-6 col-md-12 mt-sm-2 mb-2 mb-sm-0">
      <div class="element-wrapper bg-white px-2 py-2 mb-2 h-100"
           [attr.data-intro]="'component.quiz_summary.description.restrict_to_cas' | translate"
           [attr.aria-label]="'component.quiz_summary.description.restrict_to_cas' | translate">
        <h5 class="text-center">{{'component.quiz_summary.isRestrictingToCAS' | translate}}</h5>
        <p class="mb-0 text-center text-hyphen"
           role="listitem">
          <span *ngIf="questionGroupItem.sessionConfig.nicks.restrictToCasLogin">
            {{'global.yes' | translate}}
          </span>
          <span *ngIf="!questionGroupItem.sessionConfig.nicks.restrictToCasLogin">
            {{'global.no' | translate}}
          </span>
        </p>
      </div>
    </div>

    <div *ngIf="isShowingMore"
         [class.col-6]="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0"
         [class.col-md-12]="questionGroupItem.sessionConfig.nicks.selectedNicks.length === 0"
         [class.col-12]="questionGroupItem.sessionConfig.nicks.selectedNicks.length > 0"
         class="mt-sm-2 mb-2 mb-sm-0 px-0">
      <div class="element-wrapper bg-white px-2 py-2 mb-2 h-100">
        <h5 class="text-center">{{'component.quiz_summary.selected_nicks' | translate}}</h5>

        <p class="mb-0">
          <span *ngIf="!questionGroupItem.sessionConfig.nicks.selectedNicks.length">
            {{'component.quiz_summary.no_selected_nicks' | translate}}
          </span>

          <span *ngIf="questionGroupItem.sessionConfig.nicks.selectedNicks.length">
            {{'component.quiz_summary.selected_nicks' | translate}}&#58;&nbsp;
            {{questionGroupItem.sessionConfig.nicks.selectedNicks.length}}
          </span>
        </p>

        <p class="mb-0"
           [innerHTML]="questionGroupItem.sessionConfig.nicks.selectedNicks.join(', ')">
        </p>
      </div>
    </div>

    <button class="btn btn-block d-md-none mt-sm-2"
            (click)="switchShowMoreOrLess()">
      <span *ngIf="isShowingMore">{{'component.quiz_manager.show_less' | translate}}</span>
      <span *ngIf="!isShowingMore">{{'component.quiz_manager.show_more' | translate}}</span>
    </button>
  </div>
</div>
