<div class="d-none d-sm-flex dropdown mx-1">
  <button class="btn-action text-muted" type="button" id="notificationsDropdown" data-bs-toggle="dropdown"
    aria-expanded="false">
    <span class="f-w-4">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
        stroke-linecap="round" stroke-linejoin="round" class="w-100">
        <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
      </svg>
    </span>
    <span
    class="position-absolute top-0 start-50 p-1 bg-success border border-3 border-white rounded-circle mt-n1">
    <span class="visually-hidden">New alerts</span>
  </span>
  </button>
  <div class="dropdown-menu dropdown-menu-end dropdown-lg" aria-labelledby="notificationsDropdown">
    <div class="dropdown-header d-flex justify-content-between align-items-center">
      <p class="fw-bolder m-0 text-body">Notifications</p>
      <span class="badge bg-success-faded text-success rounded-pill">4 new</span>
    </div>
    <div class="simplebar-wrapper">
      <div data-pixr-simplebar>
        <ul class="list-unstyled m-0 pb-4">
          {{#if (config notifications)}}
          {{#each notifications.entries}}
            <li class="d-flex py-2 align-items-start">
              <button class="btn-icon bg-primary-faded text-primary fw-bolder me-3">{{ letter }}</button>
              <div class="d-flex align-items-start justify-content-between flex-grow-1">
                <div>
                  <p class="lh-1 mb-2 fw-semibold text-body">{{ title }}</p>
                  <p class="text-muted lh-1 mb-2 small">{{ summary }}</p>
                </div>
                <small class="text-muted text-uppercase tracking-wide fw-bold fs-xs">{{ time }}</small>
              </div>
            </li>
          {{/each}}
          {{/if}}
        </ul>
      </div>
    </div>
    <div><a class="dropdown-item text-primary fw-bolder text-center border-top pt-3" href="#">See more &rarr;</a></div>
  </div>
</div>