<div class="webpart-edit-button-container" ng-if="editMode">
    <button class="editWebpartButton btn" ng-click="editWebpart()" type="button" title='{{"Edit Webpart" | translate}}'>
        <span class="ms-Icon ms-Icon--Edit"></span><span class="editWebpartButtonText">{{"Edit" | translate}}</span>
    </button>
</div>
<div ng-show="!loading" class="poll">
    <!--TO EDIT MODE-->
    <div ng-show="editMode">
        <br />
        <p style="font-weight:bold">{{'Choose a poll' | translate}}:</p><br />
        <select class="form-control" ng-model="webpartProperties.pollId" ng-change="changepoll()">
            <option ng-selected="p.id == webpartProperties.pollId" ng-repeat="p in polls" value="{{p.id}}">{{p.title}}</option>
        </select>
        <br />
        <div>
            <button class="btn btn-success" ng-click="createPoll()" type="button">{{"Create poll" | translate}}</button>
            <button ng-show="webpartProperties.pollId > 0 " class="btn btn-default" ng-click="editPoll()" type="button">{{"Edit selected poll" | translate}}</button>
        </div>
    </div>
    <div ng-hide="editMode">
        <div ng-hide="webpartProperties.pollId > 0">
            <div>{{'Edit page to select a poll' | translate}}</div>
        </div>
        <div ng-show="webpartProperties.pollId > 0">
            <div><h3 class="quiztitle">{{response.quiz.title}}</h3></div>
            <div ng-show="displayMode == 1">
                <div>
                    <div ng-show="response.quiz.showOverview">
                        <div ng-repeat="question in response.overview.charts">
                            <div><h4 class="questiontitle">{{question.title}}</h4></div>
                            <div class="questionanswer" ng-repeat="answer in question.data">
                                <div ng-switch="answer.value" style="margin:0px;">
                                    <p ng-switch-when="1" style="margin:0px;">{{answer.label}} ({{procentValue(answer.value,question.totalNumber)}}% - {{answer.value}} {{"vote" |translate}})</p>
                                    <p ng-switch-default style="margin:0px;">{{answer.label}} ({{procentValue(answer.value,question.totalNumber)}}% - {{answer.value}} {{"votes" | translate}})</p>
                                </div>
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" ng-style="progressstyle(answer.value,question.totalNumber)">

                                    </div>
                                </div>
                            </div>
                        </div> 
                        <!--Uncomment to enable pagination-->
                       <!-- <div ng-repeat="question in response.overview.textResponses">
                            <div><h4 class="questiontitle">{{question.title}}</h4></div>
                                <div class="questionanswer" ng-repeat="answer in question.values | limitTo: pageSize : (currentPage-1)*pageSize">
                                    <div>
                                        <u>Anonymous:</u>
                                        <p>{{answer}}</p>
                                    </div>
                                </div>
                            <div class="pagination-controls" ng-if="question.values.length > pageSize">
                                <button class="btn-default btn" ng-disabled="currentPage == 1" ng-click="prevPage()">Previous</button>
                                <span>Results {{currentPage}} of {{numberOfPages(question.fieldId)}}</span>
                                <button class="btn-default btn" ng-disabled="currentPage == numberOfPages(question.fieldId)" ng-click="nextPage(question.fieldId)">Next</button>
                        </div>-->
                    </div>                       
                    </div>
                    <div ng-show="!response.quiz.showOverview">
                        {{'Thank you for your response' | translate}}
                    </div>
                    <p><b class="pollresponses">{{"Number of responses" | translate}}: </b>{{response.quiz.numberOfResponses}}</p>
                    <div>
                        <div ng-show="response.quiz.canEdit && response.submitted">
                            <button class="btn btn-success" type="button" ng-click="displayMode = 2">{{'Edit response' | translate}}</button>
                        </div>
                        <div ng-show="!response.submitted">
                            <button class="btn btn-success" type="button" ng-click="displayMode = 2">{{'Vote' | translate}}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="displayMode == 2">
                <div ng-repeat="field in response.quiz.fields">
                    <wizdom365-gf-field field="field" quiz-type="response.quiz.quizType"></wizdom365-gf-field>
                    <div class="field_{{field.id}}" style="visibility: hidden; height: 25px;">{{'Fields marked with * must be filled.' | translate}}</div>
                </div>
                <button class="btn btn-success" type="button" ng-click="saveResponse(this)">{{'Send vote' | translate}}</button>
            </div>
        </div>
    </div>
</div>
<div wizdom365-spinner="" loading="loading"></div>

