<x-layout bodyClass="g-sidenav-show  bg-gray-200">

  <x-navbars.sidebar activePage="notifications"></x-navbars.sidebar>
  <main
    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
  >
    <!-- Navbar -->
    <x-navbars.navs.auth titlePage="Notifications"></x-navbars.navs.auth>
    <!-- End Navbar -->
    <div class="container-fluid py-4">
      <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
          <div class="card mt-4">
            <div class="card-header p-3">
              <h5 class="mb-0">Alerts</h5>
            </div>
            <div class="card-body p-3 pb-0">
              <div
                class="alert alert-primary alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple primary alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-secondary alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple secondary alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-success alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple success alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-danger alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple danger alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-warning alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple warning alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-info alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple info alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-light alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple light alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div
                class="alert alert-dark alert-dismissible text-white"
                role="alert"
              >
                <span class="text-sm">A simple dark alert with <a
                    class="alert-link text-white"
                    href="javascript:;"
                  >an example
                    link</a>. Give it a click if you
                  like.</span>
                <button
                  class="btn-close py-3 text-lg opacity-10"
                  data-bs-dismiss="alert"
                  type="button"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
          </div>
          <div class="card mt-4">
            <div class="card-header p-3">
              <h5 class="mb-0">Notifications</h5>
              <p class="mb-0 text-sm">
                Notifications on this page use Toasts from Bootstrap. Read more
                details <a
                  href="https://getbootstrap.com/docs/5.0/components/toasts/"
                  target="
          "
                >here</a>.
              </p>
            </div>
            <div class="card-body p-3">
              <div class="row">
                <div class="col-lg-3 col-sm-6 col-12">
                  <button
                    class="btn bg-gradient-success w-100 toast-btn mb-0"
                    data-target="successToast"
                    type="button"
                  >Success</button>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mt-sm-0 mt-2">
                  <button
                    class="btn bg-gradient-info w-100 toast-btn mb-0"
                    data-target="infoToast"
                    type="button"
                  >Info</button>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
                  <button
                    class="btn bg-gradient-warning w-100 toast-btn mb-0"
                    data-target="warningToast"
                    type="button"
                  >Warning</button>
                </div>
                <div class="col-lg-3 col-sm-6 col-12 mt-lg-0 mt-2">
                  <button
                    class="btn bg-gradient-danger w-100 toast-btn mb-0"
                    data-target="dangerToast"
                    type="button"
                  >Danger</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="position-fixed z-index-2 bottom-1 end-1">
        <div
          class="toast fade hide bg-white p-2"
          id="successToast"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div class="toast-header border-0">
            <i class="material-icons text-success me-2">
              check
            </i>
            <span class="font-weight-bold me-auto">Material Dashboard </span>
            <small class="text-body">11 mins ago</small>
            <i
              class="fas fa-times text-md ms-3 cursor-pointer"
              data-bs-dismiss="toast"
              aria-label="Close"
            ></i>
          </div>
          <hr class="horizontal dark m-0">
          <div class="toast-body">
            Hello, world! This is a notification message.
          </div>
        </div>
        <div
          class="toast fade hide bg-gradient-info mt-2 p-2"
          id="infoToast"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div class="toast-header border-0 bg-transparent">
            <i class="material-icons me-2 text-white">
              notifications
            </i>
            <span class="font-weight-bold me-auto text-white">Material
              Dashboard </span>
            <small class="text-white">11 mins ago</small>
            <i
              class="fas fa-times text-md ms-3 cursor-pointer text-white"
              data-bs-dismiss="toast"
              aria-label="Close"
            ></i>
          </div>
          <hr class="horizontal light m-0">
          <div class="toast-body text-white">
            Hello, world! This is a notification message.
          </div>
        </div>
        <div
          class="toast fade hide mt-2 bg-white p-2"
          id="warningToast"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div class="toast-header border-0">
            <i class="material-icons text-warning me-2">
              travel_explore
            </i>
            <span class="font-weight-bold me-auto">Material Dashboard </span>
            <small class="text-body">11 mins ago</small>
            <i
              class="fas fa-times text-md ms-3 cursor-pointer"
              data-bs-dismiss="toast"
              aria-label="Close"
            ></i>
          </div>
          <hr class="horizontal dark m-0">
          <div class="toast-body">
            Hello, world! This is a notification message.
          </div>
        </div>
        <div
          class="toast fade hide mt-2 bg-white p-2"
          id="dangerToast"
          role="alert"
          aria-live="assertive"
          aria-atomic="true"
        >
          <div class="toast-header border-0">
            <i class="material-icons text-danger me-2">
              campaign
            </i>
            <span
              class="text-gradient text-danger font-weight-bold me-auto">Material
              Dashboard </span>
            <small class="text-body">11 mins ago</small>
            <i
              class="fas fa-times text-md ms-3 cursor-pointer"
              data-bs-dismiss="toast"
              aria-label="Close"
            ></i>
          </div>
          <hr class="horizontal dark m-0">
          <div class="toast-body">
            Hello, world! This is a notification message.
          </div>
        </div>
      </div>
      <x-footers.auth></x-footers.auth>
    </div>
  </main>
  <x-plugins></x-plugins>

</x-layout>
