{% extends "layouts/base.html" %}
{% load static %}

{% block title %} UI Notifications {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

  <div class="py-4">
      <nav aria-label="breadcrumb">
          <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
              <li class="breadcrumb-item"><a href="#"><span class="fas fa-home"></span></a></li>
              <li class="breadcrumb-item"><a href="#">Components</a></li>
              <li class="breadcrumb-item active" aria-current="page">Notifications</li>
          </ol>
      </nav>
      <div class="d-flex justify-content-between w-100 flex-wrap">
          <div class="mb-3 mb-lg-0">
              <h1 class="h4">Notifications</h1>
              <p class="mb-0">Dozens of reusable components built to provide buttons, alerts, popovers, and more.</p>
          </div>
      </div>
  </div>

  <div class="row">
      <div class="col-12 col-lg-6">
          <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                  <h2 class="h4 mb-0">Sweet alerts</h2>
                  <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/sweet-alerts/" class="btn btn-outline-gray"><i class="far fa-question-circle me-1"></i> Documentation</a>
              </div>
              <div class="card-body">
                  <button class="btn btn-dark" id="basicAlert">Basic alert</button>
                  <button class="btn btn-info" id="infoAlert">Info alert</button>
                  <button class="btn btn-success" id="successAlert">Success alert</button>
                  <button class="btn btn-danger" id="dangerAlert">Danger alert</button>
                  <button class="btn btn-warning" id="warningAlert">Warning alert</button>
                  <button class="btn btn-gray" id="questionAlert">Question</button>
              </div>
          </div>
      </div>
      <div class="col-12 col-lg-6">
          <div class="card">
              <div class="card-header d-flex justify-content-between align-items-center">
                  <h2 class="h4 mb-0">Notyf</h2>
                  <a href="https://themesberg.com/docs/volt-bootstrap-5-dashboard/plugins/notifications/" class="btn btn-outline-gray"><i class="far fa-question-circle me-1"></i> Documentation</a>
              </div>
              <div class="card-body">
                  <button class="btn btn-info" id="notifyTopLeft">Top left info</button>
                  <button class="btn btn-danger" id="notifyTopRight">Top right danger</button>
                  <button class="btn btn-warning" id="notifyBottomLeft">Bottom left warning</button>
                  <button class="btn btn-dark" id="notifyBottomRight">Primary bottom right</button>
              </div>
          </div>
      </div>
  </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}
