<div class="modal-header">
    <button type="button" class="close closebtn" data-ng-click="cancel()" aria-hidden="true">&times;</button>
    <h1 class="modal-title">{{'Create or edit poll' | translate}}</h1>
</div>
<div class="modal-body">
    <div wizdom365-spinner="" loading="loading"></div>
    <div ng-hide="loading">
        <div ng-hide="poll.isAdmin || poll.isGlobalAdmin">
            {{'You are not an admin on this poll' | translate}}
        </div>
        <form ng-show="poll.isAdmin || poll.isGlobalAdmin">
            <div class="container-fluid">
                <div class="row">
                    <div wizdom365-spinner="" loading="loading"></div>
                    <div class="col-sm-12" ng-hide="loading">
                        <div class="form-group">
                            <label class="control-label">{{'Title' | translate}}</label>
                            <input type="text" name="title" class="form-control" data-ng-model="poll.title" required />
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="poll.closed">
                                    {{'Closed' | translate}}
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="poll.isAnonymous">
                                    {{'Is anonymous' | translate}}
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="poll.canEdit">
                                    {{'Can response be edited' | translate}}
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="poll.showOverview">
                                    {{'Can users see all responses' | translate}}
                                </label>
                            </div>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" ng-model="poll.seeResultBeforeAnswer" ng-disabled="!poll.showOverview">
                                    {{'See result before answering' | translate}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Users' | translate}}</label>
                            <div wizdom365-principalpicker principals="poll.groups" allowwizdomgroups="true" class="principal-picker"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Administrators'  | translate}}</label>
                            <div wizdom365-principalpicker principals="poll.admins" allowwizdomgroups="true" class="principal-picker"></div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">{{'Fields' | translate}}</label>
                            <select ng-model="addfield.new" class="form-control">
                                <option value="">{{'Select field type' | translate}}</option>
                                <option value="radio">{{'radio' | translate}}</option>
                                <option value="dropdown">{{'dropdown' | translate}}</option>
                                <option value="checkbox">{{'checkbox' | translate}}</option>
                            </select>
                            <p class="wt-fieldInfo">{{'Choose how your added fields should be shown' | translate}}</p>
                        </div>
                        <div class="form-group">
                            <button class="btn btn-primary" type="button" ng-click="addNewField();" ng-disabled="!addfield.new">{{'Add Field' | translate}}</button>
                        </div>
                        <div ng-show="poll.fields.length">
                            <accordion close-others="true">
                                <accordion-group ng-repeat="field in poll.fields track by $index" is-open="panelExpanded">
                                    <accordion-heading class="panel-title">
                                        {{field.title}}
                                        <i class="pull-right ms-Icon" ng-class="{'ms-Icon--ChevronDown': panelExpanded, 'ms-Icon--ChevronRight': !panelExpanded}"></i>
                                    </accordion-heading>
                                    <div class="form-group" style="overflow:hidden">
                                        <div class="col-xs-6" style="padding-left:0;">
                                            <label class="control-label">{{'Field type' | translate}}:</label>
                                            <p>{{field.type | translate}}</p>
                                        </div>
                                        <div class="col-xs-6 text-right" style="padding-right:0;">
                                            <button class="btn btn-default" type="button" ng-click="deleteField($index)"><span class="glyphicon glyphicon-trash"></span> {{'Delete' | translate}}</button>
                                        </div>
                                    </div>
                                    <hr />
                                    <div class="form-group">
                                        <label class="control-label">{{'Title' | translate}}:</label>
                                        <input class="form-control" type="text" ng-model="field.title" value="{{field.title}}">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label">{{'Required' | translate}}:</label>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" ng-value="true" ng-selected ng-model="field.required" />{{'Yes' | translate}}
                                            </label>
                                        </div>
                                        <div class="radio">
                                            <label>
                                                <input type="radio" ng-value="false" ng-model="field.required" /> {{'No' | translate}}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group" ng-show="showAddOptions(field)">
                                        <label class="control-label" style="width:100%;">{{'Options' | translate}}:</label>
                                        <!--<div ng-show="!field.options.length">{{'No options added' | translate}}</div>-->
                                        <form class="form-horizontal" role="form" ng-model="field.options">
                                            <div class="form-group" style="margin-bottom: 5px; min-height: auto;" ng-repeat="option in field.options">
                                                <input type="hidden" ng-value="option.value = $index" />
                                                <table style="width:100%;">
                                                    <tr>
                                                        <td>
                                                            <input class="form-control" type="text" ng-model="option.title" placeholder="{{'Option' | translate}}">
                                                        </td>
                                                        <td style="padding-left:15px;">
                                                            <a class="btn btn-default btn-mini btn-block" ng-click="deleteOption(field, $index)"><span class="glyphicon glyphicon-minus"></span></a>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </form>
                                        <button class="btn btn-primary btn-small" type="button" ng-click="addOption(field)">
                                            {{'Add option' | translate}}
                                        </button>
                                    </div>
                                </accordion-group>
                            </accordion>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div class="modal-footer" ng-show="!loading && (poll.isAdmin || poll.isGlobalAdmin)">
    <button class="btn btn-primary wiz-btn-padding" ng-disabled="'' + poll.title == ''" ng-click="saveQuiz()">{{'Save' | translate}}</button>
    <button type="button" class="btn btn-default wiz-btn-padding" data-ng-if="poll.id > 0" data-ng-click="deletePoll()">{{'Delete' | translate}}</button>
</div>
