{% extends "templates/sink.nunjucks" %}

{% block body %}
  {% set heading_shared="This is a heading." %}
  {% set description_global="This is a global notification about something that has occured in the system. This message applies to the entire system." %}

  <h2 class="sink-page-header">Notification - Information (Default)</h2>
  {{ luci.notification(heading="Information! " + heading_shared, text=description_global) }}

  <h2 class="sink-page-header">Notification - Warning</h2>
  {{ luci.notification(class="luci-notification--warning", heading="Warning! " + heading_shared, text=description_global) }}

  <h2 class="sink-page-header">Notification - Success</h2>
  {{ luci.notification(class="luci-notification--success", heading="Success! " + heading_shared, text=description_global) }}

  <h2 class="sink-page-header">Notification - Error</h2>
  {{ luci.notification(class="luci-notification--error", heading="Error! " + heading_shared, text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Notification - Information (Default) - Heading only</h2>
  {{ luci.notification(heading="Information! " + heading_shared) }}

  <h2 class="sink-page-header">Notification - Warning - Heading only</h2>
  {{ luci.notification(class="luci-notification--warning", heading="Warning! " + heading_shared) }}

  <h2 class="sink-page-header">Notification - Success - Heading only</h2>
  {{ luci.notification(class="luci-notification--success", heading="Success! " + heading_shared) }}

  <h2 class="sink-page-header">Notification - Error - Heading only</h2>
  {{ luci.notification(class="luci-notification--error", heading="Error! " + heading_shared) }}


  <hr>


  <h2 class="sink-page-header">Notification - Information (Default) - Description only</h2>
  {{ luci.notification(text=description_global) }}

  <h2 class="sink-page-header">Notification - Warning - Description only</h2>
  {{ luci.notification(class="luci-notification--warning", text=description_global) }}

  <h2 class="sink-page-header">Notification - Success - Description only</h2>
  {{ luci.notification(class="luci-notification--success", text=description_global) }}

  <h2 class="sink-page-header">Notification - Error - Description only</h2>
  {{ luci.notification(class="luci-notification--error", text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Notification - Information (Default) with Close</h2>
  {{ luci.notification(heading="Information! " + heading_shared, close=true, describedby="notification1Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Warning with Close</h2>
  {{ luci.notification(heading="Warning! " + heading_shared, class="luci-notification--warning", close=true, describedby="notification1Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Success with Close</h2>
  {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success", close=true, describedby="notification2Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Error with Close</h2>
  {{ luci.notification(heading="Error! " + heading_shared, class="luci-notification--error", close=true, describedby="notification3Desc", text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Notification - Information (Default) with Close - Heading only</h2>
  {{ luci.notification(heading="Information! " + heading_shared, close=true, describedby="notification1Desc") }}

  <h2 class="sink-page-header">Notification - Warning with Close</h2>
  {{ luci.notification(heading="Warning! " + heading_shared, class="luci-notification--warning", close=true, describedby="notification1Desc") }}

  <h2 class="sink-page-header">Notification - Success with Close</h2>
  {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success", close=true, describedby="notification2Desc") }}

  <h2 class="sink-page-header">Notification - Error with Close</h2>
  {{ luci.notification(heading="Error! " + heading_shared, class="luci-notification--error", close=true, describedby="notification3Desc") }}


  <hr>


  <h2 class="sink-page-header">Notification - Information (Default) with Close - Description only</h2>
  {{ luci.notification(close=true, describedby="notification1Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Warning with Close</h2>
  {{ luci.notification(class="luci-notification--warning", close=true, describedby="notification1Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Success with Close</h2>
  {{ luci.notification(class="luci-notification--success", close=true, describedby="notification2Desc", text=description_global) }}

  <h2 class="sink-page-header">Notification - Error with Close</h2>
  {{ luci.notification(class="luci-notification--error", close=true, describedby="notification3Desc", text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Inline Notification - Information (Default)</h2>
  {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Warning</h2>
  {{ luci.notification(heading="Warning! " + heading_shared, class="luci-notification--warning luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Success</h2>
  {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Error</h2>
  {{ luci.notification(heading="Error! " + heading_shared, class="luci-notification--error luci-notification--inline", text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Inline Notification - Information (Default) - Heading only</h2>
  {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--inline") }}

  <h2 class="sink-page-header">Inline Notification - Warning</h2>
  {{ luci.notification(heading="Warning! " + heading_shared, class="luci-notification--warning luci-notification--inline") }}

  <h2 class="sink-page-header">Inline Notification - Success</h2>
  {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--inline") }}

  <h2 class="sink-page-header">Inline Notification - Error</h2>
  {{ luci.notification(heading="Error! " + heading_shared, class="luci-notification--error luci-notification--inline") }}


  <hr>


  <h2 class="sink-page-header">Inline Notification - Information (Default) Description only</h2>
  {{ luci.notification(class="luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Warning</h2>
  {{ luci.notification(class="luci-notification--warning luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Success</h2>
  {{ luci.notification(class="luci-notification--success luci-notification--inline", text=description_global) }}

  <h2 class="sink-page-header">Inline Notification - Error</h2>
  {{ luci.notification(class="luci-notification--error luci-notification--inline", text=description_global) }}


  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default)</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.") }}
  </div>

  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default) - Heading only</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--toast") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--toast") }}
  </div>


  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default) - Description only</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(class="luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(class="luci-notification--success luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.") }}
  </div>


  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default) with Close</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.", close=true, describedby="notification4Desc") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success with Close</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.", close=true, describedby="notification5Desc") }}
  </div>


  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default) with Close - Heading only</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Information! " + heading_shared, class="luci-notification--toast", close=true, describedby="notification4Desc") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success with Close</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(heading="Success! " + heading_shared, class="luci-notification--success luci-notification--toast", close=true, describedby="notification5Desc") }}
  </div>


  <hr>


  <h2 class="sink-page-header">Toast Notification - Information (Default) with Close - Description only</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(class="luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.", close=true, describedby="notification4Desc") }}
  </div>

  <h2 class="sink-page-header">Toast Notification - Success with Close</h2>
  <div class="sink-page-font-reset" style="position: relative; height: 20vh">
    {{ luci.notification(class="luci-notification--success luci-notification--toast", text="This is a toast notification about something that has occured in this context. I auto-expire and disappear.", close=true, describedby="notification5Desc") }}
  </div>


  <hr>


  <br>
{% endblock %}