agent_tracker/templates/search.html
nickviljoen 08038b066f Rebrand UI to OLIVER template: Montserrat, yellow accents, sticky nav, tab fixes
Swap the muddy #f3ae3e palette for the real OLIVER brand pulled from the master
PPT template: yellow #FFCB05 + near-black #1A1A1A + off-white #F6F7F7, Montserrat
font. White-first page with a brand-yellow highlight rectangle behind page titles,
stat tiles with yellow left-strip, and a short yellow accent line under each
card section title — picks up the template's "01" chapter-marker rhythm.

Fixes two production bugs along the way:
- Nav stays pinned at top while page scrolls. The conflicting
  `.navbar { position: relative !important }` rule was removed from nav.html
  so the `position: fixed` from style.css can take effect.
- Clicking admin tabs no longer scrolls the page. Converted
  `<a href="#users">` to `<button data-bs-target="#users">` (Bootstrap 5's
  recommended pattern), so the anchor jump can't happen.

Other refinements: table padding loosened, `transform: scale` row hover
removed (jittery on dense rows), modal headers switched to near-black,
Chart.js palette aligned with brand tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-17 10:12:18 +02:00

153 lines
No EOL
5.1 KiB
HTML

{% extends "base.html" %}
{% block title %}Search - AgentHub{% endblock %}
{% block content %}
<div class="container my-5">
<div class="row">
<div class="col-12">
<h1 class="mb-4">
<i class="fas fa-search me-2"></i>Search
</h1>
<form method="GET" class="mb-4">
<div class="input-group input-group-lg">
<input type="text"
name="q"
class="form-control"
placeholder="Search agents, users, or descriptions..."
value="{{ query or '' }}">
<button class="btn btn-primary" type="submit">
<i class="fas fa-search"></i> Search
</button>
</div>
</form>
{% if query %}
<div class="alert alert-info">
<i class="fas fa-info-circle me-2"></i>
Search results for: <strong>"{{ query }}"</strong>
</div>
<!-- Agents Results -->
{% if results.agents %}
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-robot me-2"></i>
Agents ({{ results.agents|length }})
</h5>
</div>
<div class="card-body">
<div class="row">
{% for agent in results.agents %}
<div class="col-md-6 col-lg-4 mb-3">
<div class="card h-100 border-left-primary">
<div class="card-body">
<h6 class="card-title text-primary">{{ agent.agent_name }}</h6>
<p class="card-text text-muted small">
{{ agent.agent_description[:100] if agent.agent_description else '' }}{% if agent.agent_description and agent.agent_description|length > 100 %}...{% endif %}
</p>
<div class="mb-2">
<span class="badge badge-status-{{ agent.agent_status.lower() if agent.agent_status else 'unknown' }}">
{{ agent.agent_status or 'Unknown' }}
</span>
</div>
<small class="text-muted">
<i class="fas fa-calendar me-1"></i>
Created: {{ agent.created_at.strftime('%Y-%m-%d') if agent.created_at else 'Unknown' }}
</small>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
<!-- Users Results (Admin Only) -->
{% if current_user.is_admin and results.users %}
<div class="card mb-4">
<div class="card-header">
<h5 class="mb-0">
<i class="fas fa-users me-2"></i>
Users ({{ results.users|length }})
</h5>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Role</th>
<th>Status</th>
<th>Created</th>
</tr>
</thead>
<tbody>
{% for user in results.users %}
<tr>
<td>{{ user.full_name or 'N/A' }}</td>
<td>{{ user.email }}</td>
<td>
{% if user.is_admin %}
<span class="badge bg-danger">Admin</span>
{% else %}
<span class="badge bg-primary">User</span>
{% endif %}
</td>
<td>
{% if user.is_active %}
<span class="badge bg-success">Active</span>
{% else %}
<span class="badge bg-secondary">Inactive</span>
{% endif %}
</td>
<td>{{ user.created_at.strftime('%Y-%m-%d') if user.created_at else 'Unknown' }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
{% if not results.agents and not results.users %}
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
No results found for "{{ query }}".
</div>
{% endif %}
{% endif %}
</div>
</div>
</div>
<style>
.border-left-primary {
border-left: 4px solid var(--brand-yellow) !important;
}
.badge-status-active {
background-color: #28a745;
}
.badge-status-development {
background-color: #ffc107;
color: #212529;
}
.badge-status-inactive {
background-color: #6c757d;
}
.badge-status-deprecated {
background-color: #dc3545;
}
</style>
{% endblock %}