<div class="impact-manager">

    <div class="impact-new-bar">
        <label translate>Add new impact flag:</label> <br>
        <img class="impact-icon impact-icon-small click-link" src="assets/impact_increase.png" ng-click="addImpact('increase')">
        <img class="impact-icon impact-icon-small click-link" src="assets/impact_decrease.png" ng-click="addImpact('decrease')">
        <img class="impact-icon impact-icon-small click-link" src="assets/impact_red_flag.png" ng-click="addImpact('red_flag')">
    </div>

    <div ng-class="{ 'impact-details': true, 'impact-removed': impact.doRemove }" ng-repeat="impact in impacts track by impact.id">
        <img class="impact-icon impact-icon-small" ng-src="assets/impact_{{impact.impactType}}.png">
        <div class="impact-impactdate">{{impact.impactDate | date:"yyyy-MM-dd"}}</div>
        <div class="impact-riskpicker" ng-show="riskCategory !== undefined && (impact.targetRiskCategory === undefined || impact.targetRiskCategory === riskCategory)"><select ng-model="impact.targetRiskInitialId" ng-disabled="impact.doRemove">
            <option value="-1">&nbsp;</option>
            <option ng-repeat="risk in risks track by risk.id" value="{{risk.initialId}}" ng-class="(risk.active ? 'impact-riskpicker-risk-active' : 'impact-riskpicker-risk-inactive')">{{risk.titleText}}</option>
        </select></div>
        <div class="impact-riskpicker" ng-show="riskCategory !== undefined && impact.targetRiskCategory !== undefined && impact.targetRiskCategory !== riskCategory">
          {{ foreignRisks[impact.targetRiskCategory][impact.targetRiskInitialId.toString()] }} (<span translate>risk from elsewhere</span>)
        </div>
        <div class="impact-remove">
            <i ng-show="!impact.doRemove" class="fa fa-trash icon-as-button click-link" title="{{ 'Remove impact' | translate }}" ng-click="removeImpact(impact)"></i>
            <i ng-show="impact.doRemove" class="fa fa-undo icon-as-button click-link" title="{{ 'Restore impact' | translate }}" ng-click="restoreImpact(impact)"></i>
        </div>
    </div>
</div>

