<div class="umb-notifications" id="umb-notifications-wrapper" ng-cloak>
    <ul ng-if="notifications" class="umb-notifications__notifications" aria-live="assertive" aria-relevant="additions">
        <li ng-repeat="notification in notifications"
            class="alert alert-block alert-{{notification.type}} umb-notifications__notification animated -half-second fadeIn"
            ng-class="{'-no-border -extra-padding': notification.type === 'form'}">

            <div ng-if="notification.view">
                <div ng-include="notification.view"></div>
            </div>

            <div ng-if="notification.headline">
                <a ng-if="notification.url" ng-href="{{notification.url}}" href="" target="{{notification.target}}" rel="noreferrer">
                    <strong ng-bind="notification.headline"></strong>
                    <span ng-bind-html="notification.message"></span>
                </a>
                <div ng-if="!notification.url">
                    <strong ng-bind="notification.headline"></strong>
                    <span ng-bind-html="notification.message"></span>
                </div>
            </div>

            <button type="button" class="close -align-right" ng-click="removeNotification($index)" aria-hidden="true">
                <span>&times;</span>
            </button>
        </li>
    </ul>
</div>
