<div class="content-container" ng-controller="ViewSurveyController">
    <ul class="breadcrumb">
        <li ><a href="#/system">{{'label.anchor.system' | translate}}</a></li>
        <li ><a href="#/surveys">{{'label.anchor.managesurveys' | translate}}</a></li>
        <li class="active">{{'label.heading.survey' | translate}}</li>
    </ul>   
    <div name="viewsurvey">     
        <div class="card">
            <div class="card-content">
              <div class="toolbar">
                  <h4>{{'label.heading.survey' | translate}}</h4>
                  <div class="col-sm-5 pull-right">
                          <a type="button" class="btn btn-primary pull-right" href="#/editsurvey/{{id}}"><i class="fa fa-edit"></i>&nbsp;&nbsp;{{'label.button.edit' | translate}}</a>
                      </div>
              </div>
                <div novalidate="" class="card form-horizontal well" >                 
                    <div class="form-group">
                       <label class="control-label col-sm-2">{{'label.heading.key' | translate}}&nbsp; :</label>
                       <div class="col-sm-3">
                              <label class="control-label">{{formData.key}}</label>
                       </div>
                       <label class="control-label col-sm-1">{{'label.input.name' | translate}}&nbsp; :</label>
                       <div class="col-sm-3">
                             <label class="control-label">{{formData.name}}</label>
                       </div>
                    </div>
                    <div class="form-group">
                       <label class="control-label col-sm-2">{{'label.heading.countrycode' | translate}}&nbsp; :</label>
                       <div class="col-sm-3">
                             <label class="control-label">{{formData.countryCode}}</label>
                       </div>
                       <label class="control-label col-sm-1">{{'label.input.description' | translate}}&nbsp; :</label>
                       <div class="col-sm-3">
                            <label class="control-label">{{formData.description}}</label>
                       </div>
                    </div>
                </div>
            </div>
        </div>
            <div class="card well">
                <div class="card-content">
                    <legend>{{'label.heading.questions' | translate}}</legend>
                    <div class="content">
                        <br>
                        <br/>
                        <div class="row">
                            <div class="col-sm-12 well" ng-repeat="question in formData.questionDatas" ng-show="formData.questionDatas.length>0">
                                <div name="addquestion" class="form-horizontal">
                                  <div class="col-sm-12">
                                      <label class="col-sm-2">{{'label.heading.question' | translate}} :&nbsp;{{($index+1)}}<label>
                                  </div>
                                    <div class="qform">
                                        <div class="form-group">
                                            <label class="control-label col-sm-2">{{'label.heading.key' | translate}}&nbsp; :</label>
                                              <div class="col-sm-3">
                                                  <label class="control-label">{{question.key}}</label>
                                              </div>
                                              <label class="control-label col-sm-1">{{'label.text' | translate}}&nbsp; :</label>
                                              <div class="col-sm-3">
                                                  <label class="control-label">{{question.text}}</label>
                                              </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-sm-2">{{'label.input.description' | translate}}&nbsp; :
                                            </label>
                                            <div class="col-sm-3">
                                                <label class="control-label">{{question.description}}</label>
                                            </div>
                                        </div>
                                            <div class="form-group">
                                               <label class="control-label col-sm-2">{{'label.input.options' | translate}}&nbsp; :
                                               </label>
                                                   <div class="col-sm-10 col-md-offset-2">           
                                                      <table class="table well">
                                                        <thead>
                                                            <th>{{'label.text' | translate}}</th>
                                                            <th>{{'label.heading.value' | translate}}</th>
                                                        </thead>  
                                                        <tbody>
                                                            <tr ng-repeat="option in question.responseDatas">
                                                              <td style="width60">{{option.text}}</td>
                                                              <td style="width40">{{option.value}}</td>
                                                            </tr>
                                                        </tbody>    
                                                      </table>
                                                </div>
                                            </div>                                            
                                        <hr/>
                                    </div>    
                                </div>                 
                                </div>
                        </div>
                    </div>
                </div>
             </div> 


</div>
</div>
