<div class="headerPart">
    <div class="previous-container" >
        <span *ngIf="!isFirstQuestion" class="previousTitle" (click)="onSelectPrevious()">
            <i class="material-icons" style="vertical-align: middle;position: relative;left: 5px;font-size: 1.7em;">keyboard_arrow_left</i>
            <span style="font-size: 1.2em; vertical-align: middle;">Previous</span>
        </span>
    </div>
    <div class="title-container">
        <div class="titleLargeDescr">
            <span class="largeDesc">{{categoryDesc}}</span>
        </div>
        <div class="titleShortDescr">
            <span class="shortDesc">Question {{ currentQuestion }} of {{ totalQuestions }}</span>
        </div>
    </div>
    <div class="next-container">
        <span *ngIf="!isLastQuestion" class="nextTitle" (click)="onSelectNext()">
            <span style="font-size: 1.2em; vertical-align: middle;">Next</span>
            <i class="material-icons" style="vertical-align: middle;position: relative;right: 6px;font-size: 1.7em;">keyboard_arrow_right</i>
        </span>
        <span *ngIf="isLastQuestion" class="finishTitle" (click)="onSelectFinish()">
            <span style="font-size: 1.2em; vertical-align: middle;">Finish</span>
        </span>
    </div>
</div>