{% extends "cabinet/base_cabinet.html" %}

{% block title %}Staff{% endblock %}

{% block cabinet_content %}
<div class="d-flex align-items-center justify-content-between gap-3 mb-3 flex-wrap">
  <div>
    <h1 class="h5 mb-1">Staff</h1>
    <p class="text-muted mb-0" style="font-size:.875rem;">Found: {{ total }}</p>
  </div>
  <a class="btn btn-sm btn-primary" href="#">
    <span class="bi bi-person-plus me-1"></span>Add
  </a>
</div>

<div class="row g-3">
  <div class="col-12">
    {% include "cabinet/components/card_grid.html" with cards=cards %}
  </div>
  <div class="col-12">
    {% include "cabinet/components/data_table.html" with table=table %}
  </div>
</div>
{% endblock %}