Filters And Search

<section class="row g-4">
      <div class="col-12">
        <article class="athena-card p-4" data-athena-filter-demo>
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
            <div>
              <span class="badge text-bg-primary mb-3">Functional Demo</span>
              <h2 class="h4">Searchable Content Queue</h2>
              <p class="text-secondary mb-0">Try the controls below. Matching rows update immediately and the result count is announced politely.</p>
            </div>
            <output class="athena-input-preview" data-athena-filter-count aria-live="polite">6 results</output>
          </div>

          <form class="row g-3 align-items-end mb-4" data-athena-filter-form>
            <div class="col-lg-4">
              <label class="form-label" for="filter-demo-search">Search</label>
              <input id="filter-demo-search" class="form-control" type="search" data-athena-filter-search placeholder="Search name, owner, or tag">
            </div>
            <div class="col-sm-6 col-lg-2">
              <label class="form-label" for="filter-demo-status">Status</label>
              <select id="filter-demo-status" class="form-select" data-athena-filter-field="status">
                <option value="">All Statuses</option>
                <option value="published">Published</option>
                <option value="draft">Draft</option>
                <option value="review">Review</option>
              </select>
            </div>
            <div class="col-sm-6 col-lg-2">
              <label class="form-label" for="filter-demo-type">Type</label>
              <select id="filter-demo-type" class="form-select" data-athena-filter-field="type">
                <option value="">All Types</option>
                <option value="page">Page</option>
                <option value="component">Component</option>
                <option value="docs">Docs</option>
              </select>
            </div>
            <div class="col-sm-6 col-lg-2">
              <label class="form-label" for="filter-demo-owner">Owner</label>
              <select id="filter-demo-owner" class="form-select" data-athena-filter-field="owner">
                <option value="">All Owners</option>
                <option value="design">Design</option>
                <option value="engineering">Engineering</option>
                <option value="content">Content</option>
              </select>
            </div>
            <div class="col-sm-6 col-lg-2">
              <button class="btn btn-outline-secondary w-100" type="reset" data-athena-filter-reset>Reset</button>
            </div>
          </form>

          <div class="table-responsive">
            <table class="table table-hover align-middle">
              <caption>Filterable content queue</caption>
              <thead>
                <tr>
                  <th scope="col">Item</th>
                  <th scope="col">Type</th>
                  <th scope="col">Owner</th>
                  <th scope="col">Status</th>
                  <th scope="col">Updated</th>
                </tr>
              </thead>
              <tbody>
                <tr data-athena-filter-item data-search="dashboard layout design" data-status="published" data-type="page" data-owner="design"><th scope="row">Dashboard Layout</th><td>Page</td><td>Design</td><td><span class="badge text-bg-success">Published</span></td><td>Today</td></tr>
                <tr data-athena-filter-item data-search="billing modal engineering" data-status="review" data-type="component" data-owner="engineering"><th scope="row">Billing Modal</th><td>Component</td><td>Engineering</td><td><span class="badge text-bg-warning">Review</span></td><td>Yesterday</td></tr>
                <tr data-athena-filter-item data-search="wcag guidance content" data-status="published" data-type="docs" data-owner="content"><th scope="row">WCAG Guidance</th><td>Docs</td><td>Content</td><td><span class="badge text-bg-success">Published</span></td><td>3 Jun</td></tr>
                <tr data-athena-filter-item data-search="kanban cards engineering" data-status="draft" data-type="component" data-owner="engineering"><th scope="row">Kanban Cards</th><td>Component</td><td>Engineering</td><td><span class="badge text-bg-secondary">Draft</span></td><td>2 Jun</td></tr>
                <tr data-athena-filter-item data-search="search results page design" data-status="review" data-type="page" data-owner="design"><th scope="row">Search Results</th><td>Page</td><td>Design</td><td><span class="badge text-bg-warning">Review</span></td><td>30 May</td></tr>
                <tr data-athena-filter-item data-search="owasp notes content" data-status="draft" data-type="docs" data-owner="content"><th scope="row">OWASP Notes</th><td>Docs</td><td>Content</td><td><span class="badge text-bg-secondary">Draft</span></td><td>28 May</td></tr>
              </tbody>
            </table>
          </div>

          <div class="athena-empty compact mt-3" data-athena-filter-empty hidden>
            <i class="bi bi-search" aria-hidden="true"></i>
            <p>No matching records. Adjust the search or reset the filters.</p>
          </div>
        </article>
      </div>
      <div class="col-md-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-info mb-3">Pattern</span>
          <h2 class="h5">Filter Bar Guidance</h2>
          <p class="text-secondary">Use visible labels, native controls, a reset action, and a live result count. Avoid hiding search features behind icons on desktop.</p>
        </article>
      </div>
      <div class="col-md-6">
        <article class="athena-card p-4 h-100">
          <span class="badge text-bg-success mb-3">OWASP Friendly</span>
          <h2 class="h5">Safe Client Filtering</h2>
          <p class="text-secondary">The demo treats values as data attributes and updates visibility only. Server-backed filters should validate, encode, and authorise all parameters.</p>
        </article>
      </div>
    </section>