<h1>Vote</h1>



<ul id="nav-tabs" class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active">
        <a id="currentVotes" href="#currentVotes" aria-controls="home" role="tab" data-toggle="tab" (click)="selectCurrentTab()"><i
                class="far fa-meh"></i> {{ 'Votes.VotesTab' | translate }}</a>
    </li>

    <li role="presentation">
        <a id="completedVotes" href="#completedVotes" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectCompletedVotesTab()"><i
                class="far fa-smile"></i> {{ 'Votes.CompletedVotesTab' | translate }}</a>
    </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">

    <div [hidden]="!showCurrent">
            <div *ngIf="currentVotes">
                    <table class="table table-striped table-hover table-responsive table-condensed">
                        <thead>
                            <tr>
                                <td style="width: 10%"></td>
                                <td></td>
                                <td style="width: 10%">Title</td>
                                <td>Description</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let vm of currentVotes">
                                <td class="vcenter">
                                    <button id="{{vm.requestId}}upvote" class="btn btn-info-outline col-md-6" (click)="upvote(vm)"><i class="far fa-thumbs-up"
                                            aria-hidden="true"></i></button>
                                    <button id="{{vm.requestId}}downvote" class="btn btn-info-outline col-md-6" (click)="downvote(vm)" ><i class="far fa-thumbs-down"
                                            aria-hidden="true"></i></button>
                                </td>
                                <td style="width: 10%"> <img *ngIf="vm.image" class="img-responsive poster" style="max-width: 100%;
                                    height: auto;
                                    width: 100%;"
                                        (click)="toggle($event, vm.image)" src="{{vm.image}}" alt="poster"></td>
                                <td class="vcenter" [attr.data-test]='vm.requestId'>{{vm.title}}</td>
                                <td class="vcenter" [innerHTML]="vm.description"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
        

    </div>

    <div [hidden]="!showCompleted">        
        <div *ngIf="completedVotes">
            <table class="table table-striped table-hover table-responsive table-condensed">
                <thead>
                    <tr>
                            <td style="width: 10%"></td>
                        <td></td>
                        <td style="width: 10%">Title</td>
                        <td>Description</td>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let vm of completedVotes">
                        <td class="vcenter">
                            <button id="{{vm.requestId}}upvote" class="btn btn-info-outline col-md-6" [ngClass]="{'btn-success-outline': vm.myVote == VoteType.Upvote, 'btn-info-outline':  vm.myVote != VoteType.Upvote}"
                             (click)="upvote(vm)" [disabled]="vm.myVote == VoteType.Upvote"><i class="far fa-thumbs-up"
                                    aria-hidden="true"></i></button>
                            <button id="{{vm.requestId}}downvote" class="btn btn-info-outline col-md-6" [ngClass]="{'btn-danger-outline': vm.myVote == VoteType.Downvote, 'btn-info-outline':  vm.myVote != VoteType.Downvote}"
                             (click)="downvote(vm)" [disabled]="vm.myVote == VoteType.Downvote"><i class="far fa-thumbs-down"
                                    aria-hidden="true"></i></button>
                        </td>
                        <td style="width: 10%"> <img *ngIf="vm.image" class="img-responsive poster" style="max-width: 100%;
                            height: auto;
                            width: 100%;"
                                (click)="toggle($event, vm.image)" src="{{vm.image}}" alt="poster"></td>
                        <td class="vcenter" [attr.data-test]='vm.requestId'>{{vm.title}}</td>
                        <td class="vcenter" [innerHTML]="vm.description"></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</div>


<p-overlayPanel #op [dismissable]="true" [styleClass]="'hideBackground'">
        <img class="img-responsive poster" width="70%" src="{{panelImage}}" alt="poster">
    </p-overlayPanel>