<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= serverName %> | Feedback Form</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="" name="description" />
    <meta content="" name="author" />
    
    <!-- ================== BEGIN BASE CSS STYLE ================== -->
   <!-- <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    
    <link href="/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    
   <!-- <link href="/assets/css/animate.min.css" rel="stylesheet" />
    <link href="/assets/css/style.min.css" rel="stylesheet" />
    <link href="/assets/css/style-responsive.min.css" rel="stylesheet" />-->
    <link href="/assets/css/combined.css" rel="stylesheet" />
    
    <!-- ================== END BASE CSS STYLE ================== -->

    <!-- ================== BEGIN PAGE LEVEL STYLE ================== -->
    
    <!-- ================== END PAGE LEVEL STYLE ================== -->
</head>
<body>
<div id="page-container" class="fade in" data-bind="visible:showContent">
        <!-- begin login -->
        <div class="login bg-black animated fadeInDown">
            <!-- begin brand -->
            <div class="login-header">
                <div class="brand">
                    <span style="padding-left:45%">
                        <img id="imgAppLogo" src="" height="60px" width="60px" data-bind="attr{src:appImage}">
                    </span> 
                    <small data-bind="text:appName" style="color:black;text-align:center;font-weight:bold"></small>
                </div>
                <div class="icon">
                    
                </div>
            </div>
            <!-- end brand -->
            <div class="login-content">
                <form  class="margin-bottom-0">
                    <div id="feedbackContainer">
                        <div id="surveyContents" data-bind="visible:showSurvey">
                            <table>
                                <tbody data-bind="foreach:questions">
                                    <tr>
                                        <td>
                                            <div class="form-group m-b-20 question">
                                                <label data-bind="text:questionText"></label>
                                                <ul data-bind="foreach:questionOptions">
                                                    <li>
                                                        <label>
                                                            <input type="radio" name="optionsRadios" value="option1" data-bind="value:optionText,attr{name: $parent.id}"><span data-bind="text:optionText"></span></label>
                                                    </li>
                                                   
                                                </ul>
                                                <ul data-bind="visible:otherOption">
                                                    <li>
                                                        <label>
                                                            <input type="radio" data-bind="attr{name: id}" value="other" ><span>Other</span>
                                                            <input type="text" data-bind="attr{id:id}" class="othertext">
                                                        </label>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>    
                                </tbody>
                            </table>    
                        </div>
                        <div id="ratingContents" data-bind="visible:showRating">
                            <div class="form-group m-b-20 question">
                                <label data-bind="text:ratingQuestion"></label>
                            </div>
                            <div class="form-group m-b-20 question">
                                <table>
                                    <tr>
                                        <td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img1"></td>
                                                    <td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img2"></td>
                                                    <td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img3"></td>
                                                    <td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage}" id="img4"></td>
                                                    <td style="cursor:pointer"><img data-bind="attr{src:disabledRatingImage} " id="img5"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div data-bind="visible:showMessage" class="form-group m-b-20 question">
                            <label data-bind="text:thankyouMessage"></label>
                        </div>
                    </div>
                    <div class="login-buttons" style="padding-left:25%;padding-right:25%">
                        <button type="button" id="btnSave" class="btn btn-success btn-block btn-lg" ><span data-bind="text:actionTitle"></span></button>
                        <button type="button" id="btnClose" class="btn btn-success btn-block btn-lg" style="display:none" >Close</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- end login -->
        
        
    </div>    
    <!-- ================== BEGIN BASE JS ================== -->
    <script src="/assets/plugins/jquery/jquery-3.6.0.min.js"></script>
    <script src="/assets/plugins/jquery/jquery-migrate-1.1.0.min.js"></script>
    <!--<script src="/assets/plugins/jquery-ui/ui/minified/jquery-ui.min.js"></script>-->
    <script src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!--[if lt IE 9]>
        <script src="assets/crossbrowserjs/html5shiv.js"></script>
        <script src="assets/crossbrowserjs/respond.min.js"></script>
        <script src="assets/crossbrowserjs/excanvas.min.js"></script>
    <![endif]-->
    <script src="/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!--<script src="/assets/plugins/jquery-cookie/jquery.cookie.js"></script>-->
    <!-- ================== END BASE JS ================== -->
    
    <!-- ================== BEGIN PAGE LEVEL JS ================== -->

    <!-- ================== END PAGE LEVEL JS ================== -->

    <script>
        $(document).ready(function() {
            semusiFeedback.Init();
        });
    </script>
</body>
</html>
