awx/awx/ui/client/src/partials/survey-maker-modal.html

<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">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="deleteMode === 'survey' ? deleteSurvey() : (deleteMode === 'question' ? deleteQuestion(questionToBeDeleted) : '')" class="btn Modal-footerButton ng-binding Modal-errorButton">DELETE</a>
                    <button ng-click="hideDeleteOverlay()" class="btn Modal-defaultButton Modal-footerButton">CANCEL</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>SURVEY</div>
            <div class="ScheduleToggle" ng-class="{'is-on': survey_enabled}" aw-tool-tip="surveyEnabledTooltip" data-placement="right" data-tip-watch="surveyEnabledTooltip">
                <div ng-show="survey_enabled" class="ScheduleToggle-switch is-on" ng-click="toggleSurveyEnabled()">ON</div>
                <div ng-show="!survey_enabled" class="ScheduleToggle-switch" ng-click="toggleSurveyEnabled()">OFF</div>
            </div>
        </div>
        <button id="delete-survey" class="SurveyMaker-deleteButton" data-placement="top" ng-show="survey_exists" ng-click="showDeleteOverlay('survey')" aw-tool-tip="Delete survey" data-original-title="" title="">
            <i class="fa fa-trash-o"></i>
        </button>
        <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">
            <div id="survey_maker_question_form"></div>
        </div>
        <div class="SurveyMaker-separatorPanel">
            <div class="SurveyMaker-contentSeparator">
            </div>
        </div>
        <div class="SurveyMaker-previewPanel">
            <div style="display: flex; flex-direction: column; width: 100%;">
                <div class="SurveyMaker-panelHeader">PREVIEW</div>
                <div class="SurveyMaker-panelBody">
                    <div ng-if="survey_questions.length < 1" class="SurveyMaker-noQuestions">PLEASE ADD A QUESTION ON THE LEFT</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 class="label-text" ng-class="{'prepend-asterisk': question.required}"> {{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-original-title="" title="">
                                        <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">
                                        <button class="List-actionButton" data-placement="top" ng-class="{'SurveyMaker-previewActions--selected' : editQuestionIndex == $index}" ng-click="editQuestion($index)" aw-tool-tip="Edit question" 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-original-title="" title="">
                                            <i class="fa fa-trash-o"></i>
                                        </button>
                                    </div>
                                </dnd-nodrag>
                            </div>
                        </li>
                        <li class="SurveyMaker-previewRow dndPlaceholder">
                            Drop question here to reorder
                        </li>
                    </ul>
                </div>
                <div class="SurveyMaker-panelFooter">
                    <div class="Form-buttons">
                        <button id="survey-save-button" class="btn btn-sm Form-saveButton" ng-click="saveSurvey()" ng-disabled="survey_questions.length < 1 || !can_edit || editQuestionIndex !== null">SAVE</button>
                        <button id="survey-close-button" class="btn btn-sm Form-buttonDefault" ng-click="closeSurvey('survey-modal-dialog')">CANCEL</button>
                    </div>
                </div>
            </div>

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