<div ng-switch on="item.subscriptionType">

    <div ng-switch-when="keywords">
        <div class="news-feed-item-icon">
            <a href="{{ item.sourceUrl }}">
                <i class="fa fa-file-text-o" title="{{ 'New Note' | translate }}"></i>
            </a>
        </div>

        <p class="news-feed-item-action">
            <span class="news-feed-user">{{item.contentVariables.from | userIdToName}}</span> <span translate>has added <a href="{{ item.sourceUrl }}">a new {{ item.sourceType | elementTypeToText | translate }}</a>.</span>
        </p>

        <blockquote class="news-feed-item-content" ng-if="item.sourceType === 'note'" ng-bind-html="item.contentVariables.text"></blockquote>

        <table class="news-feed-item-details">
            <tbody>
            <tr>
                <td class="news-feed-item-details-key" translate>Keywords</td>
                <td class="news-feed-item-details-value">
                    {{item.contentVariables.keywords | keywordsPrint}}
                </td>
            </tr>
            </tbody>
        </table>

        <span class="news-feed-footnote" translate>Based on your keyword subscription to {{ item.subscriptionTargetDescription }}.</span>
    </div>


    <div ng-switch-when="riskCategory">
        <div ng-if="item.actionType === 'new-risk'">

            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon_grc.png" alt="{{ 'New Risk' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{item.contentVariables.risk.lastAuthor }}</span> <span translate>has added <a href="{{ item.sourceUrl }}">a new risk</a>.</span>
            </p>

            <blockquote class="news-feed-item-content">
                <a href="{{ item.sourceUrl }}"><b ng-bind-html="item.contentVariables.risk.title"></b></a><br>
                <span ng-bind-html="item.contentVariables.risk.description"></span>
            </blockquote>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Risk category you are watching</td>
                    <td class="news-feed-item-details-value">
                        {{ item.subscriptionTargetDescription }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div ng-if="item.actionType === 'changed-risk'">

            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon_grc.png" alt="{{ 'Changed Risk' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.risk.lastAuthor }}</span> <span translate>has changed <a href="{{ item.sourceUrl }}">a risk entry</a>.</span>
            </p>

            <div class="news-feed-risk-matrix risk-matrix">
                <risk-matrix width="100" height="100" risks="item._riskMatrix" risks-hash="''" risk-x-labels="['', '', '']" risk-y-labels="['', '', '']" risk-x-label="''" risk-y-label="''" element-size="20" old-risks-filter="item._oldRisksFilter"></risk-matrix>
            </div>

            <blockquote class="news-feed-item-content">
                <b ng-bind-html="item.contentVariables.risk.title"></b><br>
                <span ng-bind-html="item.contentVariables.risk.description"></span>
            </blockquote>

            <blockquote class="news-feed-item-content-old">
                <b ng-bind-html="item.contentVariables.risk.old.title"></b><br>
                <span ng-bind-html="item.contentVariables.risk.old.description"></span>
            </blockquote>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Risk category you are watching</td>
                    <td class="news-feed-item-details-value">
                        {{ item.subscriptionTargetDescription }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div ng-if="item.actionType === 'deleted-risk'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon_grc.png" alt="{{ 'Deleted Risk' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action">
                <span translate>A risk was <b>deleted</b>.</span>
            </p>

            <blockquote class="news-feed-item-content">
                <b ng-bind-html="item.contentVariables.risk.title"></b><br>
                <span ng-bind-html="item.contentVariables.risk.description"></span>
            </blockquote>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Risk category you are watching</td>
                    <td class="news-feed-item-details-value">
                        {{ item.subscriptionTargetDescription }}
                    </td>
                </tr>
                </tbody>
            </table>

            <!-- TODO: replace icon_grc.png with risk matrix... -->
        </div>

        <div ng-if="item.actionType === 'new-impact'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img class="impact-icon click-link" ng-src="assets/impact_{{ item.contentVariables.impact.impactType }}.png" alt="{{ 'New Impact' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.from | userIdToName }}</span>
                <span translate>has added <a href="{{ item.sourceUrl }}">a new impact</a>.</span>
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Impactful note</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.contentVariables.impact.sourceDescription }}</a>
                    </td>
                </tr>
                <tr>
                    <td class="news-feed-item-details-key" translate>Risk category you are watching</td>
                    <td class="news-feed-item-details-value">
                        {{ item.subscriptionTargetDescription }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-switch-when="note">
        <div ng-if="item.actionType === 'new-impact'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img class="impact-icon click-link" ng-src="assets/impact_{{ item.contentVariables.impact.impactType }}.png" alt="{{ 'New Impact' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.from | userIdToName }}</span>
                <span translate>has added <a href="{{ item.sourceUrl }}">a new impact</a>.</span>
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Impactful note you are watching</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.contentVariables.impact.sourceDescription }}</a>
                    </td>
                </tr>
                <tr>
                    <td class="news-feed-item-details-key" translate>Risk</td>
                    <td class="news-feed-item-details-value">
                        {{ item.contentVariables.targetDescription }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-switch-when="risk">
        <div ng-switch on="item.actionType">
            <div ng-switch-when="changed-risk">
                <div class="news-feed-item-icon">
                    <a href="{{ item.sourceUrl }}">
                        <img class="impact-icon click-link" src="assets/icon_grc.png" alt="{{ 'Changed Risk' | translate }}">
                    </a>
                </div>

                <p class="news-feed-item-action">
                    <span class="news-feed-user">{{ item.contentVariables.risk.lastAuthor }}</span>
                    <span translate>has changed <a href="{{ item.sourceUrl }}">a risk</a> you are watching.</span>
                </p>

                <div class="news-feed-risk-matrix risk-matrix">
                    <risk-matrix width="100" height="100" risks="item._riskMatrix" risks-hash="''" risk-x-labels="['', '', '']" risk-y-labels="['', '', '']" risk-x-label="''" risk-y-label="''" element-size="20" old-risks-filter="item._oldRisksFilter"></risk-matrix>
                </div>

                <blockquote class="news-feed-item-content">
                    <b ng-bind-html="item.contentVariables.risk.title"></b><br>
                    <span ng-bind-html="item.contentVariables.risk.description"></span>
                </blockquote>

                <blockquote class="news-feed-item-content-old">
                    <b ng-bind-html="item.contentVariables.risk.old.title"></b><br>
                    <span ng-bind-html="item.contentVariables.risk.old.description"></span>
                </blockquote>
            </div>

            <div ng-switch-when="deleted-risk">
                <div class="news-feed-item-icon">
                    <a href="{{ item.sourceUrl }}">
                        <img src="assets/icon_grc.png" alt="{{ 'Deleted Risk' | translate }}">
                    </a>
                </div>

                <p class="news-feed-item-action">
                    <span translate>A risk you have been watching was <b>deleted</b>.</span>
                </p>

                <blockquote class="news-feed-item-content">
                    <b ng-bind-html="item.contentVariables.risk.title"></b><br>
                    <span ng-bind-html="item.contentVariables.risk.description"></span>
                </blockquote>
            </div>

            <div ng-switch-when="new-impact">
                <div class="news-feed-item-icon">
                    <a href="{{ item.sourceUrl }}">
                        <img class="impact-icon click-link" ng-src="assets/impact_{{ item.contentVariables.impact.impactType }}.png" alt="New Impact">
                    </a>
                </div>

                <p class="news-feed-item-action">
                    <span class="news-feed-user">{{ item.contentVariables.from | userIdToName }}</span>
                    <span translate>has added <a href="{{ item.sourceUrl }}">a new impact</a>.</span>
                </p>

                <table class="news-feed-item-details">
                    <tbody>
                    <tr>
                        <td class="news-feed-item-details-key" translate>Impactful note</td>
                        <td class="news-feed-item-details-value">
                            <a href="{{ item.sourceUrl }}">{{ item.contentVariables.impact.sourceDescription }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="news-feed-item-details-key" translate>Risk you are watching</td>
                        <td class="news-feed-item-details-value">
                            {{ item.contentVariables.targetDescription }}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div ng-switch-when="task">
        <div ng-if="item.actionType === 'changed-task-status'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <i class="fa fa-tasks" title="{{ 'Task status changed' | translate }}"></i>

                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.from | userIdToName }}</span>
                <span translate>updated the status of <a href="{{ item.sourceUrl }}">this OCA task</a>.</span>
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Task</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.contentVariables.task.title }}</a>
                    </td>
                </tr>
                <tr>
                    <td class="news-feed-item-details-key" translate>Status</td>
                    <td class="news-feed-item-details-value">
                        {{ item.contentVariables.new_status | translate }}
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-switch-when="auditForm">
        TODO TODO TODO
    </div>

    <div ng-switch-when="interaction">
        <div ng-if="item.actionType === 'new-comment'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <i class="fa fa-comments" title="{{ 'New comment' | translate }}"></i>

                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>has added <a href="{{ item.sourceUrl }}">a new comment</a>.</span>
            </p>

            <blockquote class="news-feed-item-content">
                {{ item.contentVariables.interactionObj.content.commentText }}
            </blockquote>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>

        </div>

        <div ng-if="item.actionType === 'new-watch'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <i class="fa fa-eye" title="{{ 'Newly watching' | translate }}"></i>

                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>is now watching this item.</span>
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div ng-if="item.actionType === 'new-unwatch'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <i class="fa fa-eye-slash" title="{{ 'Stopped watching' | translate }}"></i>

                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>has stopped watching this item.</span>
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div ng-if="item.actionType === 'new-highlight1'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon-highlight1-full.png" alt="{{ 'Highlight (!)' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action" style="min-height: 60px;">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>has <a href="{{ item.sourceUrl }}">posted</a> a</span> <img class="interaction-icon" src="assets/icon-highlight1-full.png" alt="{{ 'Highlight (!)' | translate }}" />.
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <!-- TODO continue here -->


        </div>
        <div ng-if="item.actionType === 'new-highlight2'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon-highlight2-full.png" alt="{{ 'Highlight (!!)' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action" style="min-height: 60px;">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>has <a href="{{ item.sourceUrl }}">posted</a> a</span> <img class="interaction-icon" src="assets/icon-highlight2-full.png" alt="{{ 'Highlight (!!)' | translate }}" />.
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div ng-if="item.actionType === 'new-highlight3'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <img src="assets/icon-highlight3-full.png" alt="{{ 'Highlight (!!!)' | translate }}">
                </a>
            </div>

            <p class="news-feed-item-action" style="min-height: 60px;">
                <span class="news-feed-user">{{ item.contentVariables.interactionObj.userId | userIdToName }}</span>
                <span translate>has <a href="{{ item.sourceUrl }}">posted</a> a</span> <img class="interaction-icon" src="assets/icon-highlight3-full.png" alt="{{ 'Highlight (!!!)' | translate }}" />.
            </p>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key">{{ item.sourceType | elementTypeToText | translate }}</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">{{ item.subscriptionTargetDescription }}</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div ng-switch-default>
        <div ng-if="item.actionType === 'mention'">
            <div class="news-feed-item-icon">
                <a href="{{ item.sourceUrl }}">
                    <i class="fa fa-bullhorn" title="{{ 'Mentioned' | translate }}"></i>
                </a>
            </div>

            <p class="news-feed-item-action">
                <span class="news-feed-user">{{ item.contentVariables.from | userIdToName }}</span>
                <span translate>has mentioned you.</span>
            </p>

            <blockquote class="news-feed-item-content">
                {{item.contentVariables.text}}
            </blockquote>

            <table class="news-feed-item-details">
                <tbody>
                <tr>
                    <td class="news-feed-item-details-key" translate>Mentioned in</td>
                    <td class="news-feed-item-details-value">
                        <a href="{{ item.sourceUrl }}">
                          {{ item.sourceType | elementTypeToText | translate }}
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>


    <div class="news-feed-footnote">
       {{ item.newsTime | date: 'yyyy-MM-dd HH:mm' }}

       <span class="news-feed-footnote-spacer"></span>

       <span ng-if="item.subscriptionType">
           [
            <a class="link-as-button" ng-click="removeSubscription(item)" ng-show="!item.wasUnsubscribed && !item.isUnsubscribing" translate>Stop watching</a>
            <span ng-if="item.isUnsubscribing">.......</span>
            <span ng-if="item.wasUnsubscribed" class="news-feed-was-unsubscribed" translate>No longer watching</span>
           ]
       </span>
    </div>

</div>
