<div class="bootstrap-wrapper gamification">
    <div wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="loading">
        <div style="width:100%" class="text-center">
            <h1>{{response.quiz.title}}</h1>
        </div>
        <div style="width:100%" class="text-center quizBtn-small-screen">
            <div ng-show="response.submitted || response.quiz.isAdmin">
                <span ng-show="response.submitted">
                    <a href="" ng-hide="isClosed(response.quiz.endDate) || !response.quiz.canEdit" ng-click="editform()" class="myButtonBlack" style="width:100%;text-transform: uppercase;">{{'Edit response' | translate}}</a>
                </span>
            </div>
        </div>
        <br />
        <div ng-show="viewMode == 1">
            <div class="row">
                <div class="col-md-8 col-md-offset-2 col-lg-4 col-lg-offset-4">
                    <div ng-show="isClosed(response.quiz.endDate)">
                        <div>
                            <h3>{{'The quiz' | translate}} {{'is closed' | translate}}</h3>
                            <button ng-show="response.quiz.isAdmin || response.quiz.showOverview" type="submit" ng-click="viewMode = 2" class="btn btn-success">{{'Show overview' |translate}}</button>
                        </div>
                    </div>
                    <div id="form-container" ng-hide="isClosed(response.quiz.endDate)">
                        <div ng-hide="response.quiz.fields.length" class="text-center">
                            <h3>{{'No questions has been added to this quiz' | translate}}</h3>
                        </div>
                        <form name="surveyForm" ng-show="response.quiz.fields.length">
                            <div ng-repeat="field in response.quiz.fields">
                                <wizdom365-gf-field field="field" quiz-type="response.quiz.quizType"></wizdom365-gf-field>
                            </div>
                            <div class="text-center">
                                <button type="button" ng-disabled="surveyForm.$invalid" ng-show="response.submitted" ng-click="update()" class="btn btn-danger">{{'Update' | translate}}</button>
                                <button type="button" ng-disabled="surveyForm.$invalid" ng-hide="response.submitted" ng-click="submit()" class="btn btn-danger">{{'Submit' | translate}}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div ng-show="viewMode == 2">
            <div class="row">
                <div class="col-lg-6">
                    <div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 style="margin-top:0;margin-bottom:0">
                                    {{'Your reply' | translate}}
                                    <span ng-click="downloadFile()" ng-show="response.quiz.isAdmin || response.quiz.showOverview" class="glyphicon glyphicon-download-alt showHand"></span>
                                </h4>

                            </div>
                            <div class="panel-body">
                                <table class="table table-striped" ng-hide="response.submitted">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{'Question' | translate}}</th>
                                            <th ng-if="response.quiz.isAdmin || response.quiz.showOverview">{{'Overview'  | translate}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="field in response.quiz.fields">
                                            <td>{{$index+1}}</td>
                                            <td>{{field.title}}</td>
                                            <td ng-if="response.quiz.isAdmin || response.quiz.showOverview"><span class="glyphicon glyphicon-align-justify showHand" ng-click="setShowOverview(field)"></span></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-striped" ng-show="response.submitted">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>{{'Question' | translate}}</th>
                                            <th>{{'Answer' | translate}}</th>
                                            <th ng-if="response.quiz.isAdmin || response.quiz.showOverview">{{'Overview'  | translate}}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr ng-repeat="field in response.quiz.fields">
                                            <td>{{$index+1}}</td>
                                            <td>{{field.title}}</td>
                                            <td ng-show="field.type=='textfield' || field.type=='email' || field.type=='password' || field.type=='textarea'">{{ field.value}}</td>
                                            <td ng-show="field.type=='checkbox'">{{field | wizdom365GfCheckbox}}</td>
                                            <td ng-show="field.type=='date'">{{ field.value | date : 'dd.MM.yyyy'}}</td>
                                            <td ng-show="field.type=='dropdown'">{{ field.options[field.value].title}}</td>
                                            <td ng-show="field.type=='radio'">{{field.options[field.value].title}}</td>
                                            <td ng-if="response.quiz.isAdmin || response.quiz.showOverview"><span class="glyphicon glyphicon-stats showHand" ng-click="setShowOverview(field)"></span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 style="margin-top:0;margin-bottom:0">{{'Description' | translate}}</h4>
                        </div>
                        <div class="panel-body">
                            {{response.quiz.description}}
                        </div>
                    </div>
                    <div ng-show="response.quiz.quizType == 2">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <span class="panel-title"><i class="fa fa-trophy fa-fw"></i> {{'Leaderboard' | translate}}</span>
                            </div>
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>{{'Name' | translate}}</th>
                                        <th>{{'Points' | translate}}</th>
                                    </tr>
                                </thead>
                                <tbody class="valign-middle">
                                    <tr ng-hide="response.users.length">
                                        <td></td>
                                        <td>{{'No responses has been submitted yet' | translate}}</td>
                                    </tr>
                                    <tr ng-repeat="user in response.users | wizdom365GfOrderObjectBy:'point':true | pagination: currentPageHighscore * numPerPage | limitTo:numPerPage track by $index">
                                        <td><h5>{{$index+1}}</h5></td>
                                        <td>
                                            <div style="display: table; width: 100%">
                                                <div style="display: table-cell; width: 65px; vertical-align: top;">
                                                    <div style="display:inline-block" wizdom365-presence-picture="" size="SMALLROUNDED" email="user.loginName" name="user.displayName"></div>
                                                </div>
                                                <div style="display: table-cell;cursor:default">
                                                    <h5>{{user.displayName}}</h5>
                                                </div>
                                            </div>
                                        </td>
                                        <td>{{user.point}}</td>
                                    </tr>
                                </tbody>
                            </table>
                            <wizdom365-gf-pagination ng-hide="response.users.length <= numPerPage" items="response.users" current-page="currentPageHighscore" num-per-page="numPerPage"></wizdom365-gf-pagination>
                        </div>
                    </div>
                    <div ng-show="response.quiz.quizType == 1 || response.quiz.quizType == 4">
                        <div ng-show="response.quiz.winner">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="widget-profile-header">
                                        <h4 style="margin-top:0;margin-bottom:0">{{'Winner' | translate}}</h4>
                                    </div>
                                </div>
                                <div class="panel-body">
                                    <div style="display: table; width: 100%">
                                        <div style="display: table-cell; width: 60px;">
                                            <div style="display:inline-block" class="presence" wizdom365-presence-picture="" size="ROUNDED" email="response.quiz.winner.unigueId" name="response.quiz.winner.displayName"></div>
                                        </div>
                                        <div style="display: table-cell;vertical-align:top">
                                            <span><b>{{response.quiz.winner.displayName}}</b></span><br />{{'has been drawn as the winner of this competition' | translate}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-hide="response.quiz.winner">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h4 style="margin-top:0;margin-bottom:0">{{'Winner' | translate}}</h4>
                                </div>
                                <div class="panel-body">
                                    <div class="widget-profile-text" style="padding: 0;">
                                        <span>{{'The winner has not been drawn yet' | translate}}</span>
                                        <div ng-show="response.quiz.isAdmin && isClosed(response.quiz.endDate)">
                                            <br />
                                            <div ng-show="response.quiz.quizType == 4 || response.quiz.winnerAvalibale == true">
                                                <span>{{'You are an administrator, and can therefore draw the winner' | translate}}:</span>
                                                <button class="btn btn-info" type="button" ng-click="drawWinner()">{{'Draw winner' | translate}}</button>
                                            </div>
                                            <div ng-show="response.quiz.quizType == 1 && response.quiz.winnerAvalibale == false">
                                                <span>{{'There are no correct answers. A winner can therefore not be drawn' | translate}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
