<div id="survey-modal-dialog" style="display: none;">
    <div class="SurveyMaker-deleteOverlay" ng-show="deleteOverlayVisible">
            <div class="Modal-content modal-content">
                <div class="Modal-header">
                    <div class="Modal-title" ng-bind="deleteMode === 'survey' ? 'Delete Survey' : (deleteMode === 'question' ? 'Delete Question' : '')"></div>
                    <div class="Modal-exitHolder">
                        <button class="close Modal-exit" ng-click="hideDeleteOverlay()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                <div class="Modal-body ng-binding">
                    <div class="Prompt-bodyQuery" translate>Are you sure you want to delete this {{deleteMode}}?</div>
                    <div class="Prompt-bodyTarget">{{survey_questions[questionToBeDeleted].question_name}}</div>
                </div>
                <div class="Modal-footer">
                    <button ng-click="hideDeleteOverlay()" class="btn Modal-defaultButton Modal-footerButton" translate>CANCEL</a>
                    <button ng-click="deleteMode === 'survey' ? deleteSurvey() : (deleteMode === 'question' ? deleteQuestion(questionToBeDeleted) : '')" class="btn Modal-footerButton ng-binding Modal-errorButton" translate>DELETE</a>
                </div>
            </div>
    </div>
    <div class="SurveyMaker-header">
        <div class="SurveyMaker-title">
            <div class="SurveyMaker-titleText">{{name || "New Job Template"}}<div class="SurveyMaker-titleLockup"></div><span translate>SURVEY</span></div>
            <div class="ScheduleToggle" ng-class="{'is-on': survey_enabled}" aw-tool-tip="surveyEnabledTooltip" data-container="#survey-modal-dialog" data-placement="right" data-tip-watch="surveyEnabledTooltip">
                <button ng-show="survey_enabled" class="ScheduleToggle-switch is-on" ng-click="toggleSurveyEnabled()" translate>ON</button>
                <button ng-show="!survey_enabled" class="ScheduleToggle-switch" ng-click="toggleSurveyEnabled()" translate>OFF</button>
            </div>
        </div>
        <div class="SurveyMaker-close">
            <button class="SurveyMaker-exit" ng-click="closeSurvey('survey-modal-dialog')"><i class="fa fa-times-circle"></i></button>
        </div>
    </div>
    <div class="SurveyMaker-content">
        <div class="SurveyMaker-questionPanel" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)">
            <div id="survey_maker_question_form"></div>
        </div>
        <div class="SurveyMaker-separatorPanel" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)">
            <div class="SurveyMaker-contentSeparator"></div>
        </div>
        <div class="SurveyMaker-previewPanel" ng-class="{'SurveyMaker-previewPanel--viewOnly': !(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)}">
            <div style="display: flex; flex-direction: column; width: 100%;">
                <div class="SurveyMaker-panelHeader" translate>PREVIEW</div>
                <div class="SurveyMaker-panelBody">
                    <div ng-if="survey_questions.length < 1" class="SurveyMaker-noQuestions" translate>PLEASE ADD A SURVEY PROMPT.</div>
                    <ul dnd-list="survey_questions" class="SurveyMaker-previewRows" dnd-drop="surveyQuestionDropped(index, item)">
                        <li ng-repeat="question in survey_questions" dnd-draggable="question" dnd-effect-allowed="move" class="SurveyMaker-previewRow">
                            <dnd-nodrag>
                                <div>
                                    <label class="SurveyMaker-previewLabel" for="question.variable">
                                        <span ng-show="question.required===true" class="Form-requiredAsterisk">*</span>
                                        <span class="label-text"> {{question.question_name}}</span>
                                    </label>
                                </div>

                                <div ng-if="question.question_description" class="SurveyMaker-previewDescription">
                                    <i>{{question.question_description}}</i>
                                </div>
                                <div class="SurveyMaker-previewInputRow">
                                    <span dnd-handle class="SurveyMaker-reorderButton" data-placement="top" aw-tool-tip="Drag to reorder question" data-container="#survey-modal-dialog" data-original-title="" title="" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)">
                                        <i class="fa fa-ellipsis-v"></i>
                                        <span>&nbsp;</span>
                                        <i class="fa fa-ellipsis-v"></i>
                                    </span>
                                    <survey-question class="SurveyMaker-previewInput" preview="true" question="question" ng-required="question.required" ng-disabled=true></survey-question>
                                    <div class="SurveyMaker-previewActions" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)">
                                        <button class="List-actionButton" data-placement="top" ng-class="{'SurveyMaker-previewActions--selected' : editQuestionIndex == $index}" ng-click="editQuestion($index)" aw-tool-tip="Edit question" data-container="#survey-modal-dialog" data-original-title="" title="">
                                            <i class="fa fa-pencil"></i>
                                        </button>
                                        <button class="List-actionButton List-actionButton--delete" data-placement="top" ng-click="showDeleteQuestion($index)" aw-tool-tip="Delete question" data-container="#survey-modal-dialog" data-original-title="" title="">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </dnd-nodrag>
                            </div>
                        </li>
                        <li class="SurveyMaker-previewRow dndPlaceholder" translate>
                            Drop question here to reorder
                        </li>
                    </ul>
                </div>
                <div class="SurveyMaker-panelFooter">
                    <div class="Form-buttons">
                        <button id="survey-delete-button" class="btn btn-sm SurveyMaker-deleteButton" ng-show="survey_exists && (job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)" ng-click="showDeleteOverlay('survey')" translate>DELETE SURVEY</button>
                        <button id="survey-close-button" class="btn btn-sm Form-buttonDefault" ng-click="closeSurvey('survey-modal-dialog')" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)" translate>CANCEL</button>
                        <button id="survey-close-button" class="btn btn-sm Form-buttonDefault" ng-click="closeSurvey('survey-modal-dialog')" ng-show="!(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)" translate>CLOSE</button>
                        <button id="survey-save-button" class="btn btn-sm Form-saveButton" ng-click="saveSurvey()" ng-disabled="survey_questions.length < 1 || !can_edit || editQuestionIndex !== null" ng-show="(job_template_obj.summary_fields.user_capabilities.edit || workflow_job_template_obj.summary_fields.user_capabilities.edit || canAdd)" translate>SAVE</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
