<form class="notification" ng-class="notification.className"
      ng-submit="notification.formSubmitCallback()">

    <!-- Notification title -->
    <div ng-show="notification.title" class="title-bar">
        <div class="title">{{notification.title | translate}}</div>
    </div>

    <div class="body">

        <!-- Notification text -->
        <p ng-show="notification.text" class="text"
           translate="{{notification.text.key}}"
           translate-values="{{notification.text.variables}}"></p>

        <!-- Arbitrary parameters -->
        <div class="parameters" ng-show="notification.forms">
            <guac-form
                namespace="notification.formNamespace"
                content="notification.forms"
                model="notification.formModel"
                model-only="true"></guac-form>
        </div>

        <!-- Current progress -->
        <div class="progress" ng-show="notification.progress"><div class="bar" ng-show="progressPercent" ng-style="{'width': progressPercent + '%'}"></div><div
                ng-show="notification.progress.text"
                translate="{{notification.progress.text}}"
                translate-values="{PROGRESS: notification.progress.value, UNIT: notification.progress.unit}"></div></div>

        <!-- Default action countdown text -->
        <p class="countdown-text"
           ng-show="notification.countdown.text"
           translate="{{notification.countdown.text}}"
           translate-values="{REMAINING: timeRemaining}"></p>

    </div>

    <!-- Buttons -->
    <div ng-show="notification.actions.length" class="buttons">
        <button ng-repeat="action in notification.actions" ng-click="action.callback()" ng-class="action.className">{{action.name | translate}}</button>
    </div>

</div>
