<div title="{{ 'Feedback_RateFeatureTitle'|translate:(rateFeature.title|escape) }}" class="ratefeature">

    <div class="iconContainer"
         ng-mouseenter="view.expanded=true;"
         ng-mouseleave="view.expanded=false">

        <img ng-click="rateFeature.likeFeature();view.showFeedbackForm=true;"
             class="like-icon"
             src="plugins/Feedback/angularjs/ratefeature/thumbs-up.png"/>

        <img ng-click="rateFeature.dislikeFeature();view.showFeedbackForm=true;"
             class="dislike-icon"
             ng-show="view.expanded"
             src="plugins/Feedback/angularjs/ratefeature/thumbs-down.png"/>
    </div>

    <div class="ui-confirm ratefeatureDialog" piwik-dialog="view.showFeedbackForm" yes="rateFeature.sendFeedback(view.feedbackMessage)">
        <h2>{{ 'Feedback_RateFeatureThankYouTitle'|translate:title }}</h2>
        <p ng-if="rateFeature.like">{{ 'Feedback_RateFeatureLeaveMessageLike'|translate }}</p>
        <p ng-if="!rateFeature.like">{{ 'Feedback_RateFeatureLeaveMessageDislike'|translate }}</p>
        <br />

        <div class="messageContainer">
            <textarea ng-model="view.feedbackMessage"></textarea>
        </div>

        <input type="button"
               title="{{ 'Feedback_RateFeatureSendFeedbackInformation'|translate }}"
               value="{{ 'Feedback_SendFeedback'|translate }}" role="yes"/>
        <input type="button" role="cancel" value="{{ 'General_Cancel'|translate }}"/>
    </div>

    <div class="ui-confirm ratefeatureDialog" piwik-dialog="rateFeature.ratingDone" yes="">
        <h2>{{ 'Feedback_ThankYou'|translate:rateFeature.title }}</h2>

        <div ng-if="rateFeature.like" ng-include src="'plugins/Feedback/angularjs/feedback-popup/review-links.directive.html'"></div>

        <input type="button" value="{{ 'General_Ok'|translate }}" role="yes"/>
    </div>

</div>