<ion-content>
    <section class="header-with-action-buttons">
        <div class="nav">
            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
        </div>
        <div class="action">
            <button class="toggle" (click)="isPollChecked = !isPollChecked"> <ion-checkbox [(ngModel)]="isPollChecked"></ion-checkbox> Poll </button>
            <button (click)="copyLink()"> <ion-icon name="link-outline"></ion-icon> </button>            
        </div>
    </section>


    <section class="chat">
        
        <section class="chat-per-over" 
        *ngFor="let overChat of chatData; let overIndex = index" 
        id="over-{{ overIndex }}">
            <header class="over-heading"> <h5> Over {{ overChat.over }} </h5> </header>

            <section class="question-card" *ngIf="isPollChecked">
                <header class="question">
                    {{ overChat.triviaQuestion.question }}
                </header>

                <ul class="options" [ngClass]="{'show-votes' : overChat.triviaQuestion.selectedAnswer !== null }">
                    <li *ngFor="let option of overChat.triviaQuestion.options; let i = index"
                    [ngClass]="{'active' : overChat.triviaQuestion.selectedAnswer === i }"
                    (click)="overChat.triviaQuestion.selectedAnswer = i">
                        <span class="progress"
                        [ngStyle]="{ 'width.%' : (overChat.triviaQuestion.selectedAnswer !== null ? ((option.pollUserCount * 100) / overChat.triviaQuestion.maxUserCount) : 0 ) }"></span>
                        <label> {{ option.text }} </label>
                        <p> {{ option.pollUserCount }} votes </p>
                    </li>
                </ul>
            </section>

            <section class="chat-per-ball" *ngFor="let ballChats of overChat.ballChat; let ballIndex = index"
            id="ball-{{ overIndex }}-{{ ballIndex }}">
                <header class="ball-heading"> <img src="assets/icons/ball.png" alt=""> #{{ ballChats.ball + 1 }} </header>

                <ul>
                    <li *ngFor="let chat of ballChats.chat; let chatIndex = index" 
                        [ngClass]="{'sender': chat.user && chat.user.name === 'You'}"
                        id="chat-{{ overIndex }}-{{ ballIndex }}-{{ chatIndex }}">
                        <div class="user-data" *ngIf="chat.user">
                            <img [src]="chat.user.image">
                            <label [ngStyle]="{'color' : chat.user.color }"> {{ chat.user.name }} </label>
                        </div>

                        <div class="user-data" *ngIf="!chat.user">
                            <img src="assets/home-team/KXIP.svg">
                            <label> A KXIP Fan </label>
                        </div>
                        <p> {{ chat.text }} </p>
                    </li>
                </ul>

            </section>
        </section>

    </section>


    <div class="input-holder">
        <input type="text" placeholder="Type to send" [(ngModel)]="myMessage">
        <button (click)="sendMessage()"> <ion-icon name="send"></ion-icon> </button>
    </div>


</ion-content>
