<h2 class="toc">Alerts</h2>

{% apply view_source %}
<p><button class="btn btn-primary" data-toggle="collapse" data-target=".alert">Click to toggle Bootstrap alert</button></p>

<div class="alert alert-danger collapse" role="alert">
  <strong>Danger alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-warning collapse" role="alert">
  <strong>Warning alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="alert alert-success collapse" role="alert">
  <strong>Success alert</strong> with an <a class="alert-link" href="#">alert link</a>.
  <button type="button" class="close" data-toggle="collapse" data-target=".alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
{% end %}

{% apply view_source %}
<p>We use <a href="https://getbootstrap.com/docs/4.2/components/toasts/">Bootstrap Toasts</a> for notifications.</p>
<p><button type="button" class="show-toast btn btn-primary" data-target=".toast">Show toast</button></p>

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
<script>
  $('.show-toast').on('click', function() {
    $($(this).data('target')).toast('show')
  })
</script>
{% end %}
