<div class="col-md-12" ng-controller="SurveyController">
    <div class="row">
        <ul class="breadcrumb">
            <li><a href="#/clients">{{'label.anchor.clients' | translate}}</a></li>
            <li><a href="#/viewclient/{{clientId}}">{{'label.anchor.viewclient' | translate}}</a></li>
            <li class="active">{{'label.anchor.survey' | translate}}</li>
        </ul>
    </div>
    <api-validate></api-validate>
    
    <div class="row well">
        <legend>{{ 'label.heading.Survey' | translate }}</legend>
        <div class="col-md-12">
            <div class="form-group">
                <label class="control-label col-sm-2">{{'label.surveyName' | translate}}<span class="required">*</span></label>

                <div class="col-sm-3">
                    <select id="surveyname" ng-change="surveySelected(survey)" ng-model="survey"
                            ng-options="survey as survey.name for survey in surveys"
                            value="{{survey}}" class="form-control">
                            <option selected="true" value="">{{'label.selectsurvey' | translate}}</option>
                    </select>

                </div>
            </div>
            <br>
            <hr>
            <div class="form-horizontal">
                <tabset ng-show="survey" class="marginbottom0" tabset-name="surveyTabset">
                    <tab ng-repeat="component in componentGroups" heading="{{ component[0].componentKey ? component[0].componentKey : 'Questions' }}">
                        
                        <div ng-repeat="question in component" class="form-group">
                            <label class="control-label col-sm-3">{{question.text}}</label>

                            <div class="col-sm-9">
                                <div class="radio" ng-repeat="options in question.responseDatas">
                                  <label>
                                    <input type="radio" name="{{question.id}}" ng-model="question.answer" ng-value="options"> {{options.text}}
                                  </label>
                                </div>
                            </div>
                            <!-- <div class="col-sm-9">
                                <label ng-repeat="options in question.responseDatas" class="radio-inline">
                                  <input type="radio" name="{{question.id}}" ng-model="question.answer" ng-value="options"> {{options.text}}=={{question.answer}}
                                </label>
                            </div> -->
                        </div>
                    </tab>
                </tabset>

                <div class="col-md-offset-3" ng-show="!showDeleteClient">
                    <button id="cancel" type="reset" ng-click="cancel()" class="btn btn-default">{{'label.button.cancel' | translate}}
                    </button>
                    <button id="save" type="submit" ng-click="submit()" class="btn btn-primary">{{'label.button.save' | translate}}</button>
                </div>
            </div>
        </div>

    </div>

</div>