---
import Icon from '@ui/Icon.astro'
import Button from '@ui/Button.astro'
import ListGroup from '@ui/ListGroup.astro'
import ListGroupItem from '@ui/ListGroupItem.astro'
import CardTitle from '@ui/CardTitle.astro'
import CaptureScript from '../CaptureScript.astro'
---

<!-- BEGIN NOTIFICATIONS -->
<div class="nav-item dropdown d-none d-md-flex">
  <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" aria-label="Show notifications" data-bs-auto-close="outside" aria-expanded="false">
    <Icon name="bell" />
    <span class="badge bg-red"></span>
  </a>
  <!-- BEGIN NAVBAR NOTIFICATIONS -->
  <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
    <div class="card">
      <div class="card-header d-flex">
        <CardTitle>Notifications</CardTitle>
        <button type="button" class="btn-close ms-auto" data-navbar-notifications-close aria-label="Close"></button>
      </div>
      <ListGroup flush hoverable>
        <ListGroupItem>
          <div class="row align-items-center">
            <div class="col-auto">
              <span class="status-dot status-dot-animated bg-red d-block"><span class="visually-hidden">Unread</span></span>
            </div>
            <div class="col text-truncate">
              <a href="#" class="text-body d-block">Example 1</a>
              <div class="d-block text-secondary text-truncate mt-n1">Change deprecated html tags to text decoration classes (#29604)</div>
            </div>
            <div class="col-auto">
              <a href="#" class="list-group-item-actions" aria-label="Add to favorites">
                <Icon name="star" color="muted" />
              </a>
            </div>
          </div>
        </ListGroupItem>
        <ListGroupItem>
          <div class="row align-items-center">
            <div class="col-auto">
              <span class="status-dot d-block"><span class="visually-hidden">Read</span></span>
            </div>
            <div class="col text-truncate">
              <a href="#" class="text-body d-block">Example 2</a>
              <div class="d-block text-secondary text-truncate mt-n1">justify-content:between ⇒ justify-content:space-between (#29734)</div>
            </div>
            <div class="col-auto">
              <a href="#" class="list-group-item-actions show" aria-label="Remove from favorites">
                <Icon name="star" color="yellow" />
              </a>
            </div>
          </div>
        </ListGroupItem>
        <ListGroupItem>
          <div class="row align-items-center">
            <div class="col-auto">
              <span class="status-dot d-block"><span class="visually-hidden">Read</span></span>
            </div>
            <div class="col text-truncate">
              <a href="#" class="text-body d-block">Example 3</a>
              <div class="d-block text-secondary text-truncate mt-n1">Update change-version.js (#29736)</div>
            </div>
            <div class="col-auto">
              <a href="#" class="list-group-item-actions" aria-label="Add to favorites">
                <Icon name="star" color="muted" />
              </a>
            </div>
          </div>
        </ListGroupItem>
        <ListGroupItem>
          <div class="row align-items-center">
            <div class="col-auto">
              <span class="status-dot status-dot-animated bg-green d-block"><span class="visually-hidden">Unread</span></span>
            </div>
            <div class="col text-truncate">
              <a href="#" class="text-body d-block">Example 4</a>
              <div class="d-block text-secondary text-truncate mt-n1">Regenerate package-lock.json (#29730)</div>
            </div>
            <div class="col-auto">
              <a href="#" class="list-group-item-actions" aria-label="Add to favorites">
                <Icon name="star" color="muted" />
              </a>
            </div>
          </div>
        </ListGroupItem>
      </ListGroup>
      <div class="card-body">
        <div class="row">
          <div class="col"><Button block text="Archive all" /></div>
          <div class="col"><Button block text="Mark all as read" /></div>
        </div>
      </div>
    </div>
  </div>
  <!-- END NAVBAR NOTIFICATIONS -->
</div>
<CaptureScript>
  <!-- BEGIN NAVBAR NOTIFICATIONS CLOSE -->
  <script is:inline>
    // onclick, not addEventListener: a page with several navbars runs this once per navbar,
    // and assigning the property keeps it at one handler per button.
    for (const close of document.querySelectorAll('[data-navbar-notifications-close]')) {
      close.onclick = () => {
        const toggle = close.closest('.dropdown').querySelector('[data-bs-toggle="dropdown"]')
        window.tabler.bootstrap.Dropdown.getOrCreateInstance(toggle).hide()
      }
    }
  </script>
  <!-- END NAVBAR NOTIFICATIONS CLOSE -->
</CaptureScript>
<!-- END NOTIFICATIONS -->