---
// TODO: no standalone StatusIndicator component yet.
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import PageTitle from '@ui/PageTitle.astro'
---

<!-- BEGIN HEADER UPTIME -->
<div class="page-header d-print-none">
  <div class="container">
    <div class="row g-3 align-items-center">
      <div class="col-auto">
        <span class="status-indicator status-green status-indicator-animated">
          <span class="status-indicator-circle"></span>
          <span class="status-indicator-circle"></span>
          <span class="status-indicator-circle"></span>
        </span>
      </div>

      <div class="col">
        <PageTitle>tabler.io/icons</PageTitle>
        <div class="text-secondary">
          <ul class="list-inline list-inline-dots mb-0">
            <li class="list-inline-item"><span class="text-green">Up</span></li>
            <li class="list-inline-item">Checked every 3 minutes</li>
          </ul>
        </div>
      </div>

      <div class="col-md-auto ms-auto d-print-none">
        <ButtonList>
          <Button text="Configure" icon="settings" />
          <Button color="primary" text="Pause this monitor" icon="player-pause" />
        </ButtonList>
      </div>
    </div>
  </div>
</div>
<!-- END HEADER UPTIME -->