<button id="showFeedBackModal" [hidden]="true" data-toggle="modal" data-target="#overFeedBackModal"></button>
<div id="overFeedBackModal" class="modal fade aws-modal" role="dialog">
    <div class="modal-dialog admin-modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <img src="{{imageUrl}}/assets/img/pgflow/exit_icon.png" class="close" data-dismiss="modal" (click)="closeFdModal()" />
                <!-- <h4 class="modal-title">Feedback on

                </h4> -->
            </div>
            <div class="modal-body">

                <h2> We would like to hear from you</h2>
                <p>Your valuable feedback will help us to improve our product</p>
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-12 feedback_form">
                    <mat-select placeholder="What Kind of feedback you have? " [(value)]="feedBackFormdet.feedbackType" [(ngModel)]="feedBackFormdet.feedbackType">
                        <!--  [(value)]="usecasetypeSelected" -->
                        <mat-option *ngFor="let kds of feedKinds" [value]="kds.type">
                            <span class="pull-left">{{kds.type}}</span>
                        </mat-option>
                    </mat-select>
                </div>
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-12 feedback_form">
                    <textarea rows="5" class="form-control center-always" style="min-width: 80%" placeholder="Comments" [(ngModel)]="feedBackFormdet.description"></textarea>
                </div>
                <div class="col-lg-11 col-md-11 col-sm-11 col-xs-12 feedback_form">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <span>your rating:</span><br/>
                        <star-rating-comp [starType]="'svg'" [size]="'large'" [step]="0.5" [showHalfStars]="true" [hoverEnabled]="true" (onClick)="onClick($event)" (onRatingChange)="onRatingChange($event)" [rating]="0">
                            <!--  [(ngModel)]="feedBackFormdet.givenRating" -->
                        </star-rating-comp>
                        <span *ngIf="onClickResult" class="ratingVal"> {{onClickResult.rating | number : '1.1-1'}}</span>
                        <!-- <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
                        <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p> -->
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <button class="btn btn-lg pull-right btn-fd-submit" (click)="submitAplnFeedback()"><span>Submit </span><mat-icon>chevron_right</mat-icon></button>
                    </div>
                </div>
                <div *ngIf="isError">
                    <div class="errTxt">{{errorMsg}}</div>
                </div>
            </div>
        </div>
    </div>
</div>