<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>Use the <a href="https://ned.im/noty/">Noty library</a> for notifications.</p>
<p><button class="btn btn-primary noty-alert">Show Noty alert</button></a></p>

<script>
  $('body')
    .off('.noty-alert')
    .on('click.noty-alert', '.noty-alert', function() {
      new Noty({type: 'error', text: "Here is a Noty alert"}).show()
    })
</script>
{% end %}
