<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

{{#each items}}
<div data-notification
  class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}"
  role="alert">
  {{#is ../variant "toast"}}
  {{#is type "error"}}
  {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
  {{/is}}
  {{#is type "success"}}
  {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
  {{/is}}
  {{#is type "warning"}}
  {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
  {{/is}}
  {{#is type "info"}}
  {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
  {{/is}}
  {{/is}}
  <div class="{{@root.prefix}}--{{../variant}}-notification__details">
    {{#is ../variant "inline"}}
    {{#is type "error"}}
    {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
    {{/is}}
    {{#is type "info"}}
    {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
    {{/is}}
    {{#is type "success"}}
    {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
    {{/is}}
    {{#is type "warning"}}
    {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
    {{/is}}
    <div class="{{@root.prefix}}--{{../variant}}-notification__text-wrapper">
      <p class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</p>
      <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
    </div>
    {{/is}}
    {{#is ../variant "toast"}}
    <h3 class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</h3>
    <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
    <p class="{{@root.prefix}}--{{../variant}}-notification__caption">{{timestamp}}</p>
    {{/is}}
  </div>
  {{#is ../variant "inline"}}
  <button tabindex="0"
    class="{{@root.prefix}}--inline-notification__action-button {{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost"
    type="button">Action</button>
  {{/is}}
  <button data-notification-btn class="{{@root.prefix}}--{{../variant}}-notification__close-button" type="button"
    aria-label="close">
    {{ carbon-icon 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
  </button>
</div>
{{/each}}
