<!doctype html>
<html lang="en">
<head>
  {{> head title="Notifications" }}
  <!--only for presenting on this page-->
  <style>
    h3 {
      text-align: left;
      margin-bottom: 40px;
      width: 100%;
    }

    .heading-4 {
      margin-bottom: 30px;
      color: #8b8b8b;
    }

    .notification {
      margin-bottom: 70px;
    }
  </style>
</head>
<body class="notification-page">
<h1>Notifications</h1>
<div class="container">
  <div class="row">
    <div class="col">
      <h3>Notifications</h3>

      <div class="heading-4">
        All devices (full width according to grid size)
      </div>
      {{> notifications notification-page.success withCloseBtn="true"}}
      {{> notifications notification-page.warning withCloseBtn="true"}}
      {{> notifications notification-page.warning-note withCloseBtn="true"}}
      {{> notifications notification-page.info withCloseBtn="true"}}
      {{> notifications notification-page.reminder withCloseBtn="true"}}

      <h3>Errors</h3>

      <div class="heading-4">
        All devices (full width according to grid size)
      </div>
      {{> notifications notification-page.error}}


      <h3>App notifications</h3>
      {{> notifications notification-page.app-error-cache withCloseBtn="true"}}
      <br/><br/>
      {{> notifications notification-page.app-error-offline withCloseBtn="true"}}
      <br/><br/>
      {{> notifications notification-page.app-success withCloseBtn="true"}}
      <br/><br/>
    </div>
  </div>
</div>
{{> scripts }}
</body>
</html>