<div class="risk-tracker">
    <div class="loadingIndicator" ng-show="loading" translate>
        Loading risk tracker...
    </div>

    <div class="error" ng-if="errorMessage">
        {{errorMessage}}
    </div>

    <div class="risk-tracker-floats" ng-show="!loading">
        <table class="risk-left risk-table" width="850">
        <tr>
            <th>#</th>
            <th translate>Risk</th>
            <th>{{riskXLabel}}</th>
            <th>{{riskYLabel}}</th>
        </tr>
        <tr ng-repeat="risk in risks | filter:{active: true, isDeleted: false} | orderBy: 'number'">
            <td class="table-cell-centered">{{risk.number}}</td>
            <td><a id="{{zoomKey}}/{{risk.initialId}}"></a>
                <b><div contenteditable="true" class="risk-tracker-risk-title"
            ng-model="risk.title" only-paste-text></div></b> <span ng-if="oldRisksFilter && !getOldRisk(risk)" class="risk-tracker-new-item" translate>NEW</span><br>
                   <div contenteditable="true"
                   class="risk-tracker-risk-description"
                   ng-model="risk.description"
                   only-paste-text></div>

                <div class="risk-tracker-buttons-bar">
                    <i class="fa fa-trash icon-as-button" title="{{ 'Remove risk' | translate }}" ng-click="deleteRisk(risk.id)"></i>

                    <div class="interaction-button-divider"></div>

                    <interaction-buttons ng-if="risk.initialId >= 0"
                                         target-type="'risk'"
                                         target-id="risk.initialId"
                                         target-description="htmlToText(risk.title)"
                                         source-url="(sourceLink ? '#' + sourceLink + '%2F' + risk.initialId : undefined)">
                </div>

                <div ng-if="getOldRisk(risk)" class="old-risk-text">
                    <div ng-if="risk.title != getOldRisk(risk).title"><b ng-bind-html="getOldRisk(risk).title"></b><br></div>
                    <div ng-if="risk.title != getOldRisk(risk).title || risk.description != getOldRisk(risk).description" ng-bind-html="getOldRisk(risk).description"></div>
                </div>

                <div ng-if="showImpacts && oldRisksFilter && risk.initialId" class="risk-impact-viewer">
                    <impact-viewer viewer-title="risk.title" risk-category="riskCategory" risk-initial-id="risk.initialId" from-date="oldRisksFilter"></impact-viewer>
                </div>
            </td>
            <td class="table-cell-centered">{{risk.xAxis | riskLabel:riskXLabels}}
                <div ng-if="getOldRisk(risk)" class="old-risk-text">
                    <br>
                    <br>
                    {{getOldRisk(risk).xAxis | riskLabel:riskXLabels}}
                </div>

            </td>
            <td class="table-cell-centered">{{risk.yAxis | riskLabel:riskYLabels}}
                <div ng-if="getOldRisk(risk)" class="old-risk-text">
                    <br>
                    <br>
                    {{getOldRisk(risk).yAxis | riskLabel:riskXLabels}}
                </div>
            </td>
        </tr>
        <tr>
            <th colspan="4" translate>No longer active risks</th>
        </tr>
        <tr ng-repeat="risk in risks | filter:{hasActive: false} | filter:showOldRisk | orderBy: 'number'" class="risk-no-longer-active">
            <td class="table-cell-centered old-risk-text">{{risk.number}}</td>
            <td class="table-cell-centered old-risk-text"><b><div ng-bind-html="risk.title"></div></b><br>
                <div ng-bind-html="risk.description"></div>

                <div ng-if="showImpacts && oldRisksFilter && risk.initialId" class="risk-impact-viewer">
                    <impact-viewer viewer-title="risk.title" risk-category="riskCategory" risk-initial-id="risk.initialId" from-date="oldRisksFilter"></impact-viewer>
                </div>
            </td>
            <td class="table-cell-centered old-risk-text">{{risk.xAxis | riskLabel:riskXLabels}}</td>
            <td class="table-cell-centered old-risk-text">{{risk.yAxis | riskLabel:riskYLabels}}</td>
        </tr>
        <tr class="do-not-print">
            <td colspan="2" style="text-align: left;">
                <button ng-click="addRisk()" translate>Add Risk</button> &nbsp;&nbsp;&nbsp;
                <button ng-click="saveRisks()" ng-show="!savingRisks" translate>Save Risks</button>
                <div class="loadingIndicatorSmall" ng-show="savingRisks" translate>Saving...</div>
            </td>
            <td colspan="2" style="text-align: right;">
                <button ng-click="freezeRisks()" ng-show="!freezingRisks" translate>Freeze Risks</button>
                <div class="loadingIndicatorSmall" ng-show="freezingRisks" translate>Freezing...</div>

            </td>
        </tr>
        </table>

        <div class="risk-right" keep-visible-on-scroll="500">
            <div class="risk-matrix">
                <risk-matrix width="300" height="300" risks="risks" risks-hash="risksHash" risk-x-labels="riskXLabels" risk-y-labels="riskYLabels" risk-x-label="riskXLabel" risk-y-label="riskYLabel" element-size="30" old-risks-filter="oldRisksFilter"></risk-matrix>
            </div>

            <div class="old-risks-picker">
                <translate>Show frozen risks</translate>:<br>
                <select ng-options="item.dt as item.text for item in oldRiskDatetimes | orderBy:'dt':true" ng-model="oldRisksFilter"></select>
            </div>

            <div ng-if="showImpacts && oldRisksFilter" class="impacts-without-risk">
                <b translate>Impacts that are not attached to a specific risk</b>
                <impact-viewer viewer-title="''" risk-category="riskCategory" risk-initial-id="-1" from-date="oldRisksFilter"></impact-viewer>
            </div>

            <div class="risk-tracker-watch">
                <span translate>Watch this risk matrix:</span>
                <subscription-eye type="'riskCategory'" target="riskCategory" target-description="riskCategoryDescription"></subscription-eye>
            </div>
        </div>
    </div>
</div>
